摘要
本文章向大家介绍React新旧版本生命周期对比，主要包括React新旧版本生命周期对比使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
react在版本16.3前后存在两套生命周期，16.3之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。
react新旧生命周期的区别：
- 新生命周期中去掉了三个will钩子，分别为componentWillMount、componentWillReceiveProps、componentWillUpdate；
- 新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。
旧版生命周期
旧版生命周期图示：
生命周期阶段：
创建/挂载阶段：
创建/挂载阶段会执行以下钩子函数：
constructor(props)
初始化时调用，在组件整个生命周期中只调用一次
componentWillMount()
在执行render()之前调用，在这里可以访问到组件最新的props和state
render()
渲染组件结构，这里可以访问到props和state
componentDidMount()
当组件渲染完毕并成功将真实DOM挂载到页面上时执行，也是在组件整个生命周期中只调用一次
更新阶段：
以下情况触发组件的更新：
- 外部传入的props改变
- 执行setState()
- 调用组件自身的forceUpdate()方法强制组件重新渲染
更新阶段会执行以下钩子函数：
componentWillReceiveProps(nextProps)
在props改变时会调用这个钩子，传入这次更新的props的值
shouldComponentUpdate(nextProps,nextState)
在props改变和setState() 的情况下触发组件更新时会调用这个钩子，传入这次更新的props和state的值，可以通过this.state和this.props获取旧状态进行对比
注意：这个方法必须显式地返回true或者false来通知React是否要更新组件
componentWillUpdate(nextProps,nextState)
在render()前执行，传入这次更新的props和state的值
render()
componentDidUpdate(prevProps,prevState)
当组件更新完毕时调用，传入上一次的props和state发值
卸载阶段
卸载阶段就简单多了，当React将这个组件销毁之前，会调用下面的钩子函数：
componentWillUnmount
组件销毁之前调用，在这里面可以移除掉一些窗口监听事件、定时器\
新版生命周期
新版生命周期又分为16.3和16.4+版本
16.3图示：
16.4+图示：
生命周期阶段：
创建/挂载阶段：
创建/挂载阶段会执行以下钩子函数：
constructor(props)
初始化时调用，在组件整个生命周期中只调用一次
getDerivedStateFromProps(props,state)
在执行render()之前调用，在这里可以访问到组件最新的props和state
render()
渲染组件结构，这里可以访问到props和state
componentDidMount()
当组件渲染完毕并成功将真实DOM挂载到页面上时执行，也是在组件整个生命周期中只调用一次
更新阶段：
以下情况触发组件的更新：
- 外部传入的props改变
- 执行setState()
- 调用组件自身的forceUpdate()方法强制组件重新渲染
更新阶段会执行以下钩子函数：
getDerivedStateFromProps(props,state)
如果是16.3版本，在props改变的情况下触发组件更新时会调用这个钩子
如果是16.4+版本，只要是更新阶段就会触发
shouldComponentUpdate(nextProps,nextState)
在props改变和setState()的情况下触发组件更新时会调用这个钩子，传入这次更新的props和state的值，可以通过this.state和this.props获取旧状态进行对比
注意：这个方法必须显式地返回true或者false来通知React是否要更新组件
render()
getSnapshotBeforeUpdate(prevProps,prevState)
在render()后执行，传入上一次的props和state，这个方法也需要返回一个值，用于在componentDidUpdate中接收使用，而且这个钩子必须搭配componentDidUpdate一起使用，否则会报错
componentDidUpdate(prevProps,prevState,value)
当组件更新完毕时调用，有三个参数，前两个是上一次的props和state，第三个参数就是getSnapshotBeforeUpdate钩子返回的值
卸载阶段
卸载阶段就简单多了，当React将这个组件销毁之前，会调用下面的钩子函数：
componentWillUnmount
组件销毁之前调用，在这里面可以移除掉一些窗口监听事件、定时器
