react生命周期函数

在组件创建，组件中的数据修改，组件销毁的过程中，所涉及到的函数统称为组件的生命周期函数。

组件的生命周期可以分为三个阶段：

1.加载阶段：在组件初始化的时候执行的函数，最显著的特点是，在整个生命周期中只会执行一次，就像人的出生一样；

2.更新阶段：在组件的属性（props）和状态（state）发生改变时执行，有选择性的发生0次或多次；

3.卸载阶段：在组件对象销毁时执行，也是只会执行一次，就如同人的死亡一样；

旧的react的周期函数：

加载阶段：

1. constructor():初始化state;
2. getDefaultProps():设置默认的属性，也可以使用defaultProps设置组件的默认属性；
3. getInitialState():初始化state,也可以通过constructor(),this.state;
4. componentWillMount: 组件将要挂载时调用的函数，可以在此修改state;
5. render():创建虚拟的DOM,进行diff算法，更新DOM树都在此执行；
6. componentDidMount:组件渲染之后调用；

更新阶段：

1. componentReceiveProps(nextProps):组件加载时不调用，组件接受新的props时调用；
2. shouldComponentUpdate(nextProps,nextState):组件接受新的props或者state时调用，使用diff算法更新，如果返回值为true，则更新数据，否则不会调用render；
3. componentWillUpdate(nextProps,nextState):组件更新时调用，在此处可以修改state；
4. render()：组件渲染；
5. componentDidUpdate():组件更新完成后调用；

卸载阶段：

1. componentWillUnmount():卸载组件；

 见名知义，这些函数名还是比较好记忆的；

大概画一个流程图：

新的生命周期函数

加载阶段：

1. constructor():同上；
2. static getDerivedStateFromProps(props,state):组件每次被rerender的时候，包括在组件构建之后(虚拟dom之后，实际dom挂载之前)，每次获取新的props或state之后；每次接收新的props之后都会返回一个对象作为新的state，返回null则说明不需要更新state；配合componentDidUpdate，可以覆盖componentWillReceiveProps的所有用法;
3. render():同上
4. componentDidMount():同上；

更新阶段：

1. static getDerivedStateFromProps(props,state):
2. shouldComponentUpdate(nextProps,nextState);
3. render();
4. getSnapshotBeforeUpdate(prevProps,prevState):触发时间: update发生的时候，在render之后，在组件dom渲染之前；返回一个值，作为componentDidUpdate的第三个参数；配合componentDidUpdate, 可以覆盖componentWillUpdate的所有用法;
5. componentDidUpdate()；

卸载阶段：

1. componentWillUnmount:组件卸载；

错误处理：

1. componentDidCatch(error,info):任何地方的JavaScript报错的时候触发；

对比而言，React16新的生命周期中新增了两个函数：

static getDerivedStateFromProps(props,state)，getSnapshotBeforeUpdate(prevProps,prevState)，

替代了：

componentWillMount()，componentReceiveProps(nextProps)，componentWillUpdate(nextProps,nextState)，

而且还新增了错误处理；

最适合与服务端进行数据交互的函数：

        componentDidMount()函数，在这个阶段实例和dom元素已经挂载完成，可以进行相关的dom操作；

react性能优化是那个函数：

        shouldComponentUpdate:在该函数中采用diff算法计算数据的更新，可以阻止掉没有改变的数据更新；

参考文章链接：https://www.cnblogs.com/jpwz/p/12411646.html