React小白进门

react.png

如今，前端框架Angular，React和Vue逐渐成熟起来，他们三个各显其色,下面我们就先来熟悉轻量级的React吧！！！

React

是什么 （What）

• React是一个JavaScript的UI库，简单来说是MVC中的V

谁提出的，提出的原因（Why & Who）

• React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站，在2013年开源。

特点（How）

• 轻量级的一个库
• 组件化
• 速度快
• 单向数据流

• 跨浏览器兼容（支持IE8）

  
  
  

  know-react.png

简单的了解React背景后，接下来我们看看React的一些关键词

React的关键词

• 安装
• JSX语法
• Rendering
• 组件、props、state
• 处理事件
• 生命周期
• 虚拟DOM

安装

• 根据官网直接下载安装包
• 使用包管理器（npm、yarn）安装react
  • npm init
  • npm install react react-dom
    或
  • yarn init
  • yarn add react react-dom

Hello world

安装完之后，运用React写个“Hello React”

运行结果：

result.png

从代码中可以看出想在html文件中运行React，需要引入react.js、react-dom.js和browser.min.js这三个文件，浏览器器才能识别React，其次就是script标签的类型应为text/babel,因为React的JSX语法（下面会介绍到），与JavaScript不兼容。
上面这个Hello React简单例子，就是React最基本的HTML模板，至于为什么这样写，浏览器就会出现这样的结果，不要着急，待我娓娓道来。

JSX语法

const element = 
Hello React
;

上面这种写法既不是字符串赋值，也不是HTML标签。其被称为JSX语法，是JS的一种扩展。大部分情况下，在React中，我们用JSX来描述界面。JSX就像是一种模板语言，但它也包括JS的全部API。上面的HelloWrold例子中render方法中第一个参数就是用JSX语法写的一个表达式。

Rendering element 渲染元素

 ReactDOM.render(
        
Hello React
,
        document.getElementById('example')
    );

渲染元素就是用最基本的ReactDOM.render()方法进行渲染。就是将模板（

Hello React

）转换为HTML元素，插入到指定的DOM中去（插入到id为example元素中去）。

code-babel.png

从图片中可以看出，

Hello React

经过编译后，插入到 id为 example的 div中去。

组件、props、state

组件使得界面分离成独立的，可重复使用的部件。概念上来讲，组件就像是JavaScript函数，他接收任意的输入(被称作props)，且返回渲染页面的元素。
定义组件的方法：JavaScript函数定义、ES6 Class定义
组件有两个核心的概念：props和state

1.props

props是组件的属性，由外部通过JSX属性设置，一旦初始设置完成，就可以认为props是不可修改的。关于props，官网有严格的规则：

All React components must act like pure functions with respect to their props.

所有的组件必须像纯函数一样对待他们的props。
什么是纯函数呢？纯函数就是相同的输入总是返回相同的输出的函数。这就意味着组件的props是不可修改的。

运行结果：

result.png

由此可以看出，运行结果和上面例子的运行结果一样。这个例子是通过写JavaScript方法定义了一个组件，并且组件中添加了一个属性 name,值为 React。在 Hello组件中可以通过 props.name获取 name属性的值。
上面提到React的props属性是不可修改的，当修改时则会报错。比如在Hello方法中进行修改

function Hello(props){
        props.name = "world";
        return 
Hello,{props.name}
    }

则浏览器就会报错

error.png

提示未知类型错误：不能修改只读对象属性name的值

2.State

state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state 呈现不同的 UI 展示。一旦状态（数据）更改，组件就会自动调用 render 重新渲染 UI，这个更改的动作会通过 this.setState 方法来触发

运行结果：

havnotliked.png

再次点击后

liked.png

从代码中看出初始化时， state.liked值为 false,当点击

标签里的文本时，就会触发 click事件，从而调用 handleClick方法，在该方法中通过 setState来修改 state.liked的值。

处理事件

React元素处理事件和DOM元素处理是类似的，但有两点语法上的不同：

• React事件命名遵守驼峰命名规则，而不是小写命名
• 用JSX传递方法作为事件处理，而非字符串形式

生命周期

组件的生命周期分为三种状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

React 提供了五种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

虚拟DOM

React页面加载速度快，就是因为virtual DOM（虚拟DOM）的存在，不直接操作原生DOM。React将DOM结构存储在内存中，然后同render()的返回内容进行比较，计算出需要改动的地方，最后才反映到DOM中当局部DOM发生变化，页面加载避免全部DOM的重新加载。

未完待续。。。