[react] react15、react16生命周期对比

一、react15生命周期

 

react15生命周期

1. 初始状态

   

    

2. 点击“挂载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。