截止当前React版本：16.13.1
一，v16.3(含16.3)版本之后的生命周期
1，v16.3版本如下：
2，v16.4版本如下：
16.4版本在16.3版本的基础上，只对静态方法getDerivedStateFromProps进行了调整，增加在props更新和forceUpdate()时也可触发此方法。
测试执行如下：
1，挂载阶段
2，更新阶段
触发setState：
触发forceUpdate：
3，卸载阶段
完整测试代码如下（测试使用的react版本: 16.13.1）：
import React from 'react';
export default class Cyclelife extends React.Component{
constructor(props){
super(props)
this.state = {
value: '0'
}
console.log('---0---constructor执行');
}
static getDerivedStateFromProps(props, state){
console.log('---1---static getDerivedStateFromProps执行');
return null
}
componentDidMount(){
console.log('---2---componentDidMount执行');
}
shouldComponentUpdate(nextProps, nextState){
console.log('---3---shouldComponentUpdate执行');
if (this.state.value !== nextState.value) {
return true;
} else {
return false;
}
}
getSnapshotBeforeUpdate(prevProps, prevState){
console.log('---4---getSnapshotBeforeUpdate执行');
return null;
}
componentDidUpdate(prevProps, prevState, snapshot){
// 这里的snapshot获取getSnapshotBeforeUpdate函数return的值；
console.log('---5---componentDidUpdate执行');
}
componentWillUnmount(){
console.log('---6---componentWillUnmount执行');
}
btnClick = (e) => {
this.setState({
value: e.target.value
})
}
update = () => {
this.forceUpdate();
}
render () {
console.log('render执行')
return (
<div>
<button onClick={() => { this.update()}}>forceUpdate</button>
<input style={{width: 200}} value={this.state.value} onChange={this.btnClick}/>
</div>
)
}
}
二，v16.3版本及之后的调整（仅限16.x）
1，新增的生命周期
- static getDerivedStateFromProps(props, state)：该方法在render方法执行之前调用，包括组件的第一次记载。它应该返回一个新的 state 对象，通常用在组件状态依赖外部输入的参数的情况。
- getSnapshotBeforeUpdate(props, state, snapshot)：该方法在每次 DOM 更新之前调用，用来收集 DOM 信息。它返回的值，将作为参数传入componentDidUpdate()方法。
2，弃用的生命周期
- 16.3：为不安全的生命周期引入别名，
UNSAFE_componentWillMount、UNSAFE_componentWillReceiveProps和UNSAFE_componentWillUpdate。 - 未来 16.x 版本：为
componentWillMount、componentWillReceiveProps和componentWillUpdate启用废弃告警。 - 17.0：删除
componentWillMount、componentWillReceiveProps和componentWillUpdate。
3，说明
在v16.3之后使用：static getDerivedStateFromProps()替换componentWillMount()
若使用，开发模式警告如下：
**getSnapshotBeforeUpdate()替换componentWillReceiveProps()和componentWillUpdate()，**使用的话在开发中会警告提示如下：
三，v16.3版本之前的生命周期函数
下图为React-V16.3版本(不含V16.3)之前的生命周期函数执行流程图：
一、函数功能
1，componentWillMount
componentWillMount()方法在渲染前调用
2，componentDidMount
componentDidMount()方法在组件已经被渲染到DOM中后执行
3，componentWillReceiveProps
componentWillReceiveProps()在子组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
4，shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) 返回一个布尔值。每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI 就不会更新，默认返回true。组件挂载时，render方法的第一次执行，不会调用这个方法。
5，componentWillUpdate
componentWillUpdate()在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
6，componentDidUpdate
componentDidUpdate()在组件完成更新之后立即调用。在初始化时不会调用
7，componentWillUnmount
componentWillUnmount()在组件从DOM中被移除之前立刻被调用
注：shouldComponentUpdate只有返回true的情况下，才会触发后面的生命周期函数（componentWillUpdate和componentDidUpdate）；不写，默认返回true。此生命周期函数常用于props数据是否有更新而触发子组件的render，从而提升性能。
