本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
react生命周期一样是react面试常考题，掌握它当我们面对react组件渲染问题时可以有更好的思路解决，今天就结合图片与解析的形式，并以通俗易懂的语言讲解react生命周期，相信你耐心阅读下来一定能够有所收获。
1. 旧生命周期
1.1 初始化和挂载阶段
- 设置默认属性。
- constructor构造器，super执行，设置初始化的state。
- componentWillMount第一次运行。
- render第一次渲染。
- componentDidMount执行，且只在初始化执行一次。
1.2 运行阶段
1.2.1 父组件更新时
- componentWillReceiveProps执行，参数有父组件更新前后的props。
- shouldComponentUpdate执行，可以在内部设置是否继续执行渲染，可以在这里阻断组件渲染更新。
- componentWillUpdate执行，如果shouldComponentUpdate没有阻断就开始做更新准备。
- render执行，使用新的状态渲染组件。
- componentDidUpdate执行，更新组件渲染完毕之后执行。
1.2.2 自身状态state改变
如果是自身状态改变，那么不会执行componentWillReceiveProps。
因为不是由外部props导致的更新，其他就与上方后面四步一致。
componentWillReceiveProps执行，参数有父组件更新前后的props。- shouldComponentUpdate执行，可以在内部设置是否继续执行渲染，可以在这里阻断组件渲染更新。
- componentWillUpdate执行，如果shouldComponentUpdate没有阻断就开始做更新准备。
- render执行，使用新的状态渲染组件。
- componentDidUpdate执行，更新组件渲染完毕之后执行。
1.3 销毁阶段
只执行一个。
- componentWillUnmount，常用于销毁那些不会自动跟着组件一起销毁的计时器等。
2. 新生命周期
2.1 销毁阶段不变
仍然是一个componentWillUnmount。
2.2 getDerviedStateFromProps
从旧的生命周期可以看到在render执行前的钩子有
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
让我们想想在render之前执行的钩子能有什么作用？
shouldComponentUpdate控制是否更新在很多场合有用，比如我们不希望没有受到父组件props影响的组件由于父组件更新而被迫更新。所以保留
根据props决定state？这个功能我们是需要的，就是原来componentWillReceiveProps做的事。
剩下的我们原来是用来调用异步ajax请求数据？显然有问题，因为可能会导致异步ajax无故多次调用，更何况在初始化第一次render之后的有且只执行一次的componentDidMount中调用异步请求明显更加合理。
由此可见我们在render前只需要两个钩子就够了，除了shouldComponentUpdate之外剩下三个钩子被静态方法getDerviedStateFromProps代替。
2.3 getSnapshotBeforeUpdate
原来只是简单的用render前后的componentWillUpdate和componentDidUpdate来判断更新前后，现在我们知道componentWillUpdate被删除了（原因在上文）。
所以不应该简单用render来表示更新这个过程，所以新的周期中render和react更新dom区分开了。
并且在它们中间加了一个getSnapshotBeforeUpdate，可以判断更新前的dom状态。
2.4 版本16.4之后
后来发现了一些问题，认为不应该有更新过程跳过getDerviedStateFromProps，因此在16.4+修改了这点
尾言
鸣谢 图片来自aermin的博客
如果觉得这篇文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~