React组件的生命周期

React组件在网页中会经历创建、更新、删除三个过程。其生命周期也会历经三个过程：

装载过程（Mount）组件第一次在DOM中渲染。
更新过程（Update）组件重新渲染。
卸载过程（Unmount）组件在DOM中删除。
下面对这三个过程进行详细阐述。

装载过程：

装载过程是组件第一次在DOM中渲染的过程，会依次调用如下函数：
1. constructor
2. getInitialState
3. getDefaultProps
4. componentWillMount
5. render
6. componentDidMount

下面对这些函数进行说明：

constructor:

constructor函数是组件的构造函数，主要功能为：
1. 初始化state
2. 绑定函数的this环境（也可不进行绑定，函数使用ES6中的箭头函数即可绑定this到当前组件实例）

    constructor( props ){
        super(props)
        //初始化state
        this.state = {count:props.initValue};
        //绑定onClickButton函数的this环境
        this.onClickButton = this.onClickButton.bind(this)
    }

getInitialState && getDefaultProps:

getInitialState和getDefaultProps函数在ES6的React组件中不会用到，一个是设置初始状态，一个是设置默认属性。

componentWillMount:

componentWillMount也基本不会用到，componentWillMount发生在即将装载时，即使重新setState也已经迟了，不会引起重绘，所以componentWillMount的内容完全可以放在constructor中执行。

render:

render函数为纯函数，不可以在render函数中改变组件的props和state。组件中一定要有render函数，因为其他函数都有默认实现，而render函数没有。如果组件不需要渲染界面，则在render中返回null或者false即可。

componentDidMount:

当render函数返回的东西已经发生渲染后，会触发componentDidMount函数。该函数是经常使用的函数。

更新过程：

更新过程就是组件的props或者state改变时触发组件的更新。依次调用如下函数：
1. componentWillReceiveProps
2. shouldComponentUpdate
3. componentWillUpdate
4. render
5. componentDidUpdate

下面对这些函数进行说明：

componentWillReceiveProps(nextProps):

只要父组件的render函数被调用，在其render函数中的子组件就会触发componentWillReceiveProps函数。

shouldComponentUpdate(nextProps, nextState):

规定什么时候需要重新渲染，用于提高React组件性能。

componentWillUpdate、componentDidUpdate:

类似于componentWillMount和componentDidMount，一个在render前，一个在render后。

卸载过程：

卸载过程只涉及如下函数：
1. componentWillUnmount
因为卸载组件后不需要再对组件有任何操作，所以只需要componentWillUnmount函数对组件删除之前进行一些操作即可。

整体流程图：

流程图可参考下方流程图:

3284159097-5bbb08d17db33_articlex.png

新的生命周期

新的生命周期加入了static getDerivedStateFromProps (nextProps, prevState)和getSnapshotBeforeUpdate (prevProps, prevState)这两个钩子函数用来代替componentWillReceiveProps以及componentWillUpdate，也删除了componentWillMount。
static getDerivedStateFromProps (nextProps, prevState)可以直接return相应的state，以更新当前的state，如果没有状态更新，则return null.
getSnapshotBeforeUpdate (prevProps, prevState)发生在React更新Dom元素之前，获取一个快照，它返回的结果将作为componentDidUpdate(prevProps, prevState,snapShot)的第三个参数，可根据第三个参数的值在componentDidUpdate生命周期中进行状态更新。
同时，加入了错误捕获处理钩子函数componentDidCatch用来捕获错误。

参考文献：
React-新的生命周期 https://segmentfault.com/a/1190000016617400?utm_source=tag-newest#item-1