React 组件的生命周期

react 组件生命周期有三个状态：

Mounting（挂载）：已插入真实 DOM

Updating（更新）：正在被重新渲染

Unmounting（移除）：已移出真实 DOM

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

下面我们看一个例子

var LifecycleTest = React.createClass({
getInitialState: function(){
console.log('getInitialState.....');
return {
count:0,
}
},
getDefaultProps: function(){
console.log('getDefaultProps....');
},
componentWillMount: function(){
console.log('componentWillMount...');
},
componentDidMount: function(){
console.log('componentDidMount..');
var self = this;
this.timer = setInterval(function(){
self.setState({
count: self.state.count + 1,
});
}, 1000);
},
componentWillUnmount: function(){
console.log('componentWillUnmount.....');
alert(' you should remove node ... ');
clearInterval(this.timer);
},
handleClick: function(){
console.log('handleClick ....');
React.unmountComponentAtNode( document.getElementById('app') );
},
render: function(){
console.log('render ....');
return (
<div>
<p>count: {this.state.count}</p>
<input type="text" ref="myTextInput" />
<button onClick={this.handleClick}>移除</button>
</div>
)
}
});

var res = React.render(
<LifecycleTest />,
document.getElementById('app')
);

运行后，后台会打印：

getDefaultProps....   // 初始化状态
getInitialState.....  // 初始化属性
componentWillMount... // 渲染之前调用
render ....           // 渲染 DOM
componentDidMount..   // 渲染之后调用
render ....           // timer 改变状态后，重新渲染 DOM

当点击“移除”按钮后，DOM 会被移除，所以会调用 ：

componentWillUnmount 方法，该方法在组件从 DOM 中移除的时候立刻被调用。

在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

注意：

componentWillMount() ： 服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果在这个方法内调用 setState，render() 将会感知到更新后的 state，将会执行仅一次，尽管 state 改变了。

componentDidMount(): 在初始化渲染执行之后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个 DOM 展现，你可以通过 this.getDOMNode() 来获取相应 DOM 节点。如果想和其它 JavaScript 框架集成，使用 setTimeout 或者 setInterval 来设置定时器，或者发送 AJAX 请求，可以在该方法中执行这些操作。

componentWillUpdate(object nextProps, object nextState)： 在接收到新的 props 或者 state 之前立刻调用。在初始化渲染的时候该方法不会被调用。使用该方法做一些更新之前的准备工作。

注意：你不能在该方法中使用 this.setState()。如果需要更新 state 来响应某个 prop 的改变，请使用 componentWillReceiveProps。

componentDidUpdate(object prevProps, object prevState)： 在组件的更新已经同步到 DOM 中之后立刻被调用。该方法不会在初始化渲染的时候调用。使用该方法可以在组件更新之后操作 DOM 元素。

注意：为了兼容 v0.9，DOM 节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode() 来访问 DOM 节点。

componentWillUnmount()： 在组件从 DOM 中移除的时候立刻被调用。在该方法中执行任何必要的清理，比如无效的定时器，或者清除在 componentDidMount 中创建的 DOM 元素。

componentWillReceiveProps(object nextProps)：在组件接收到新的 props 的时候调用。在初始化渲染的时候，该方法不会调用。用此函数可以作为 react 在 prop 传入之后， render() 渲染之前更新 state 的机会。老的 props 可以通过 this.props 获取到。在该函数中调用 this.setState() 将不会引起第二次渲染。

boolean shouldComponentUpdate(object nextProps, object nextState)： 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。

更多详细的介绍请看 react 中文官网：http://reactjs.cn/react/docs/component-specs.html