React 入门

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

本文是我学习react的总结，带你两张图入门react。react讲HTML的DOM结构拆分成单个组件，然后重新组合渲染得到view。

第一张图就是来认识组件。

1、React.createClass方法：这是创建一个组件的方法

var module = React.createClass({

});

2、在每一个组件中有一个渲染方法render();当这个组件被调用的时候首先会调用这个渲染方法

3、在render() 方法中可以声明样式，return返回的可以是一个jsx描述的DOM，也可以是另一个子组件

render: function(){

var myStyle = {

color:"#66FFFF",

fontSize:30

};

return (

hello

);

}

4、每一个组件都有两个属性 this.props 、this.state

5、this.state属性是组件的状态值，可以通过以下方式赋初始状态

getInitialState: function(){

return ;

}

还可以更改（覆盖、添加）状态

this.setState();

6、state是react组件内部的状态，外部是无法改变的。 但想让两个组件产生联系，可以用props获得值的方式是，传值是在调用组件的时候 这就相当于函数传参

7、ReactDom.render()是 React 的最基本方法，用于将组件转为 HTML 语言，并插入指定的 DOM 节点。所以有两个参数（组件，指定的DOM节点）

ReactDOM.render(

,//不能是分开的两个组件，必须用顶级节点包裹

document.getElementById('example')

);

第二张图了解组件的生命周期

开始---->获得父组件传入的props参数---->初始化组件state---->componentWillMount组件将要挂载---->render组件挂载，渲染DOM---->componentDidMount组件挂载完成

当属性改变---->componentWillReceiveProps(props改变时触发)---->shouldComponentUpdate表示是否根据新的props和state重新渲染DOM，返回值为布尔型

true---->componentWillUpdate将要重新渲染---->render渲染DOM---->componentDidUpdate渲染完成---->继续等到指令

false---->继续等到指令

卸载---->componentWillUnmont将要卸载---->结束（这一过程一般不用操作，浏览器会自动清除资源）

重点注意：

如果组件收到新的属性（props），就会调用 componentWillReceiveProps()输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下：

componentWillReceiveProps: function(nextProps) {

this.setState({

});

}