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