react9 生命周期

<script src="src/libs/react.js"></script>

<script src="src/libs/JSXTransformer.js"></script>

},
render: function () {
//渲染并返回一个虚拟DOM
console.log('render');
return (
<div>
hello
<h1>{this.props.name} </h1>
<button onClick={this.clickHandle}>Click me</button>
</div>
)
},
componentDidMount : function () {
//该方法发生在render方法之后
//在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构
console.log('componentDidMount');
console.log('###end###')

},
//3.个更新阶段
componentWillReceieveProps: function() {
//该方法发生在this.props被修改或父组件调用setProps()方法之后
console.log('componentWillRecieveProps');
},
shouldComponentUpdate: function() {
//是否需要更新
console.log('shouldComponentUpdate');
return true;
},
componentWillUpadate: function() {
//将要更新
console.log('componentWillUpadate');
},
componentDidUpdate: function() {
//更新完毕
console.log('componentDidUpdate');
},
//4.销毁阶段
componentWillUnmout: function() {
//销毁时被调用
console.log('componentWillUnmout');
}
})
React.render(
<MyComponent name="World " />,
document.getElementById('example')
)
</script>
</body>

生命周期各阶段

在整个ReactJS的声明周期中，主要会经历这四个阶段：创建阶段、实例化阶段、更新阶段、销毁阶段

创建阶段：

该阶段主要发生在创建组件类的时候，即在调用React.createClass的时候。这个阶段只会触发一个getDefaultProps方法，该方法会返回一个对象，并缓存下来。然后与父组件制定的props对象合并，最后赋值给this.props作为该组件的默认属性。

实例化阶段

该阶段主要发生在实例化组件类的时候，也就是组件类被调用的时候。

React.render(
<MyComponent name="World " />,
document.getElementById('example')
)

该组件被调用的时候，这个阶段会触发一系列的流程，具体的执行顺序如下所示。

getInitialState。

初始化组件的state的值，其返回值会赋值给组件的this.state属性。
componentWillMount 在渲染（挂载）之前调用一次。

此时this.refs对象为空。如果在此时调用this.setState()则会更新this.state对象
render

根据state的值，生成页面需要的虚拟DOM结构，并返回该结构
componentDidMount

在渲染之后调用一次。根据虚拟DOM结构而生成的真实DOM进行相应的处理，组件内部可以通过this.getDOMNode()来获取当前组件的节点，然后就可以像在web开发中那样操作里面的DOM元素了。

componentDidMount : function () {
//该方法发生在render方法之后
//在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真实DOM结构
console.log('componentDidMount');
console.log('###end###')

更新阶段

主要发生在用户操作或者组件有更新的时候，此时会根据用户的操作行为进行相应的页面结构的调整。该阶段也会触发一系列的流程，具体的执行顺序如下所示。

componentWillReceiveProps

在将要接收props时调用。在该函数中，通常可以调用this.setState方法来完成对state的修改。

props是父组件传递给资组建的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）。

componentWillReceieveProps: function() {
//该方法发生在this.props被修改或父组件调用setProps()方法之后
console.log('componentWillRecieveProps');
},

shouldComponentUpdate

该方法用来拦截新的props或state，然后根据事先设定好的判断逻辑，返回值决定组件是否需要update。

组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。

shouldComponentUpdate: function() {
//是否需要更新
console.log('shouldComponentUpdate');
return true;
},

componentWillUpdate ：

组件更新之前调用一次。当上一部中shouldComponentUpdate方法返回true时候，就可以在该方法中做一些更新之前的操作。
render

根据一系列的diff算法，生成页面需要的虚拟DOM结构，并返回该结构。实际表明，在render中，最好只做数据和模板的结合，而不进行state等逻辑的修改，这样组件结构更清晰。
componentDidUpdate 组件的更新已经同步到DOM中后出发。

除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。

销毁阶段

componentWillUnmount

会在组件即将从挂载点移去时调用，用来取出去除即将被销毁的DOM节点的引用，或者是清除计时器，取消监听的时间等等。

componentWillMount、componentDidMount和componentWillUpdate、componentDidUpdate可以对应起来。区别在于，前者只有在挂载的时候会被调用；而后者在以后的每次更新渲染之后都会被调用。