React生命周期钩子

自己最近因为graphQL的原因，开始学习react，经过了vue的洗礼，深深知道生命周期钩子在开发中起到的作用，因此对它进行整理。先上一张官网上react生命周期钩子的全局图如下

一、Constructor

（一）Constructor（）

在React中constructor表示父类的构造方法，用来新建父类的this对象。

这是ES6对类的默认方法，该方法是类中必须有的。

如果没有显示定义，则会默认添加空的constructor( )方法。

class Point {
}

// 因为会自动声明，所以等价于
class Point {
  constructor() {}
}

（二）super（）

在使用class而非函数创建的子类中，继承使用 extends 关键字来实现。

子类 必须 在 constructor( )调用 super( )方法，否则新建实例时会报错，

原因是子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工，

如果不调用super方法；子类就得不到this对象。

如图，不调用super方法使用this会直接报错

而对于super（）or super（props）是根据在组件是使用中是否需要使用this.props来决定的，如果需要使用，则必须声明props，否则效果一样。

二、ComponentWillMount

该方法在首次渲染之前调用，也是再 render 方法调用之前修改 state 的最后一次机会。

三、render

该方法会创建一个虚拟DOM，用来表示组件的输出。React组件的html模块或是其他的一些模板操作，均在这里完成

对于一个组件来讲，render方法是唯一一个必需的方法。render方法需要满足下面几点：

1. 只能通过 this.props 和 this.state 访问数据（不能修改）

2. 可以返回 null,false 或者任何React组件，在控制一个组件是否显示时有非常大的作用

3. 只能出现一个顶级组件，不能返回一组元素，需要使用一个块级元素包裹最外层

4. 不能改变组件的状态

5. 不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因，这也是React虚拟dom的体现。

四、ComponentDidMount

该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，在这里可以获取到真是的dom，在诸如用echarts绘图或是地图相关的需要使用真实dom的地方非常有用，可以使用ref和getDomNode访问到真是的node节点，如下

componentDidMount: function(){
        var canvas = this.refs.mainCanvas.getDOMNode();
        //这是有效的，可以访问到 Canvas 节点
    }

 五、ComponentWillReceiveProps

在接收到父元素传过来的props之前调用，可以在其中更新state，来触发render函数，来重新加载组件

六、shouldComponentUpdate

判断这个组件是否要更新，如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。这是性能优化的一个好办法。

shouldComponentUpdate: function(nextProps, nextState){
    return this.state.checked === nextState.checked;
    //return false 则不更新组件
}

七、componentWillUpdate 

这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate(object nextProps, object nextState) 会被调用，注意不要在此方面里再去更新 props 或者 state。

八、componentDidUpdate

这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate(object prevProps, object prevState) 会被调用。可以在这里访问并修改 DOM。

九、componentWillUnmount

每当React使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 componentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

1、getInitialState
2、componentWillMount
3、render
4、componentDidMount