详述React生命周期函数

React严格定义了组件的生命周期，分为如下三个过程：

装载过程（Mounting）：也就是组件第一次在DOM树中渲染的过程；

更新过程（Updating）：当组件重新渲染的过程；

卸载过程（Unmounting）：组件从DOM中删除的过程。

一、装载过程：

我们先来看装载过程，当组件第一次被渲染的时候，依次调用的函数是如下这些：

• constructor
• getInitialState
• getDefaultProps
• componentWillMount
• render
• componentDidMount

1、constructor

构造函数，并不是每个组件都需要定义自己的构造函数，无状态的React组件往往就不需要定义构造函数，

执行时间：组件被加载前最先调用，并且只调用一次。

作用：

• 继承父组件的Props

super(props) 

• 初始化state，因为组建生命周期中任何函数都可能要访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方；

  this.state={变量名:值} 

• 绑定成员函数的this环境

 this.函数名称 = this.函数名称.bind(this); 

      这样做的目的在于，在render中调用时，可直接使用this.函数名称。

2、getInitialState和getDefaultProps

getInitialState这个函数的返回值会用来初始化组件的this.state，getDefaultProps函数的返回值可以作为props的初始值，和getInitialState一样，这两个函数只在React.createClass方法创造的组件类才会用到。总之，实际上getInitialState和getDefaultProps两个方法在ES6的方法定义的React组件中根本不会用到。

假如我们用React.createClass方法定义一个组件Sample，设定内部状态foo的初始值为字符串bar，同时设定一个叫sampleProp的prop初始值为数字值0，代码如下：

const Sample = React.createClass({
        getInitialState: function() {
            return {foo: 'bar'};
        },
        getDefaultProps: function() {
            return { sampleProp: 0 }
        }
    });

用ES6的话，在构造函数中通过给this.state赋值完成状态的初始化，通过给类属性defaultProps赋值指定props初始值，达到的效果是完全一样的，代码如下：

class Sample extends React.Component {
        constructor(props) {
           super(props);
            this.state = { foo: 'bar' };
          }
     };
    Sample.defaultProps = {
        return { sampleProp: 0 }
    };

3、componentWillMount

组件将要挂载，在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state。

4、render

React组件必不可少的核心组件，不能在该函数中修改状态机state。

• 执行时间：componentWillMount之后，componentDidMount之前，
• 作用：渲染挂载组件
• 触发条件：（1）初始化加载页面（2）状态机改变setState ( 3 ) 接收到新的props（父组件更新）
• 注意：render函数并不做实际的渲染动作，组件在render中生成虚拟的DOM节点,即JSX,最后由React生成真实的DOM节点。

5、componentDidMount

组件已经挂载，在render之后执行，只执行一次。

二、更新过程（Updating）

当组件被装载到DOM树上之后，用户在网页上可以看到组件的第一印象，但是要提供更好的交互体验，就要让该组件可以随着用户操作改变展现的内容，当props或者state被修改的时候，就会引发组件的更新过程。

更新过程依次会调用以下函数，其中render函数和装载过程一样，没有差别。

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

注意：并不是所有的更新过程都会执行所有的函数。

1、componentWillReceiveProps(nextProps)

只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。注意：在互联网上有些教材声称这个函数只有当组件的props发生改变的时候才会被调用，其实是不正确的。

2、shouldComponentUpdate（nextProps，nextState）

除了render函数，shouldComponentUpdate可能是React组件生命周期中最重要的一个函数了。

说render函数重要，是因为render函数决定了该渲染什么，而说shouldComponentUpdate函数重要，是因为它决定了一个组件什么时候不需要渲染。

render和shouldComponentUpdate函数，也是React生命周期函数中唯二两个要求有返回结果的函数。render函数的返回结果将用于构造DOM对象，而shouldComponentUpdate函数返回一个布尔值，告诉React库这个组件在这次更新过程中是否要继续。

在更新过程中，React库首先调用shouldComponentUpdate函数，如果这个函数返回true，那就会继续更新过程，接下来调用render函数；反之，如果得到一个false，那就立刻停止更新过程，也就不会引发后续的渲染了。如果使用得当，就能够大大提高React组件的性能，虽然React的渲染性能已经很不错了，但是，不管渲染有多快，如果发现没必要重新渲染，那就干脆不用渲染就好了，速度会更快。

3、componentWillUpdate和componentDidUpdate

如果组件的shouldComponentUpdate函数返回true，React接下来就会依次调用对应组件的componentWillUpdate、render和componentDidUpdate函数。

componentWillMount和componentDidMount，componentWillUpdate和componentDidUpdate，这两对函数一前一后地把render函数夹在中间。

和装载过程不同的是，当在服务器端使用React渲染时，这一对函数中的Did函数，也就是componentDidUpdate函数，并不是只在浏览器端才执行的，无论更新过程发生在服务器端还是浏览器端，该函数都会被调用。

三、卸载过程（Unmounting）

React组件的卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。