一、react15生命周期
-
初始状态
初始状态 -
点击“挂载Child Component”按钮后
点击“挂载Child Component”后
从右边的console中可以看出Child组件首次挂载的时候，依次触发了Child组件的constructor, componentWillMount, render, componentDidMount。
3.点击“修改Child组件的props.count”按钮后
shouldComponentUpdate返回true的情况下：
从右边的console中可以看出，当Child组件的props改变时，当shouldComponentUpdate返回true的情况下，依次调用了Child组件的componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate。
shouldComponentUpdate返回false的情况下：
从右边的console中可以看出，当Child组件的props改变时，当shouldComponentUpdate返回false的情况下，只调用了Child组件的componentWillReceiveProps, shouldComponentUpdate。
因此在某些情况下，可以使用shouldComponentUpdate来做优化，在本文中不细讲这块内容。
4.点击“修改Child组件的state.number”按钮后
shouldComponentUpdate返回true的情况下：
从右边的console中可以看出，当Child组件的state改变时，依次调用了Child组件的shouldComponentUpdate, componentWillUpdate, render, componentDidUpdate。
shouldComponentUpdate返回false的情况下：
从右边的console中可以看出，当Child组件的state改变时，当shouldComponentUpdate返回false的情况下，只调用了Child组件的shouldComponentUpdate。
跟修改props.count相比，少调用了componentWillReceiveProps。
二、react16生命周期
1.初始状态
2.点击“挂载Child Component”按钮后
从右边的console中可以看出Child组件首次挂载的时候，依次触发了Child组件的constructor, getDerivedStateFromProps, render, componentDidMount。
3.点击“修改Child组件的props.count”按钮后
shouldComponentUpdate返回true的情况下：
从右边的console中可以看出，当Child组件的props改变时，当shouldComponentUpdate返回true的情况下，依次调用了Child组件的getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate。
shouldComponentUpdate返回false的情况下：
从右边的console中可以看出，当Child组件的props改变时，当shouldComponentUpdate返回false的情况下，只调用了Child组件的getDerivedStateFromProps, shouldComponentUpdate。
4.点击“修改Child组件的state.number”按钮后
shouldComponentUpdate返回true的情况下：
从右边的console中可以看出，当Child组件的state改变时，依次调用了Child组件的getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate。
shouldComponentUpdate返回false的情况下：
从右边的console中可以看出，当Child组件的state改变时，依次调用了Child组件的getDerivedStateFromProps, shouldComponentUpdate。
与修改Child组件的props时相同。
5.点击“卸载Child Component”按钮后
从右边的console中可以看出，当Child组件卸载前会调用Child组件的componentWillUnmount。
参考文章:
React生命周期及事件详解
React v16.3 版本新生命周期函数浅析及升级方案