React 新旧生命周期

新生命周期

如下图所示：

React16新生命周期图

后面17中即将废弃的三个生命周期

`componentWillMount`

`componentWillReceiveProps`

`componentWillUpdate`

说明

目前在16版本中 componentWillMount，componentWillReceiveProps，componentWillUpdate 并未完全删除这三个生命周期函数，而且新增了UNSAFE_componentWillMount，UNSAFE_componentWillReceiveProps，UNSAFE_componentWillUpdate三个函数，官方计划在 17 版本完全删除这三个函数，只保留UNSAVE_ 前缀的三个函数，目的是为了向下兼容，但是对于开发者而言应该尽量避免使用他们，而是使用新增的生命周期函数替代它们。

挂载阶段

construct

construct(props)

作用

获取 this 对象【 super(props) 】
初始化 state 状态数据
自定义方法 this 绑定说明

该构造函数方法中不要使用 setState() 方法，使用 this.state 赋予 state 初始值
避免在构造函数中引入任何副作用或订阅【该些操作应放入 componentDidMount 函数中】

getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState)

1、参数：

props: 最新的 props 参数
state: 之前的 state 2、返回值：
返回新的 state 对象或 null 说明
函数内部不能访问 this 对象，即无法获取 this.state 和 this.props
在挂载时接受到新的 props，组件内调用 setState 和 forceUpdate 也会调用
取代旧生命周期的 componentWillMount componentWillReceiveProps componentWillUpdate

render

componentDidMount

更新阶段

getDerivedStateFromProps

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

1、参数

nextProps: 最新的 props 参数
nextState: 即将需要更新的 state 对象 2、返回值【boolean类型】
ture: 默认值，更新渲染
false: 不更新渲染说明
在挂载时接受到新的 props，组件内调用 setState 和 forceUpdate 也会调用
返回 false 并不会阻止子组件在 state 更改时重新渲染
不建议在 shouldComponentUpdate() 中进行深层比较或使用 JSON.stringify()。这样非常影响效率，且会损害性能

render

getSnapshotBeforeUpdate

getSnapshotBeforeUpdate(prevProps, prevState)

1、参数

prevProps: 之前的 props
prevState: 之前的 state 2、返回值
返回值作为 componentDidUpdate 周期函数的第三个参数值，无传递值时返回 null 说明
替代 componentWillUpdate 周期函数

componentDidUpdate

componentDidUpdate(prevProps, prevState, snapshot)

1、参数

prevProps: 之前的 props
prevState: 之前的 state
snapshot：getSnapshotBeforeUpdate 周期函数的返回值, 默认值为 undefined 说明
可以操作 DOM，和发起服务器请求，还可以 setState
注意一定要用if 语句控制，否则会导致无限循环
当 shouldComponentUpdate 返回值为 false 时，不会调用该周期函数

卸载阶段

componentWillUnmount

componentWillUnmount()

说明

主要用于清楚一些定时器，取消网络请求，清理无效的 DOM 元素等垃圾清理工作
在该函数内调用 setState 方法，组件不会再进行重新渲染

旧生命周期

挂载阶段

construct

componentWillMount/UNSAFE_componentWillMount

componentWillMount()

说明

该周期函数在 render 方法之前调用，所以 setState 不会触发重新渲染

render

componentDidMount

更新阶段

componentWillReceiverProps/UNSAFE_componentWillReceiveProps

componentWillReceicerProps(nextProps)

1、参数

nextProps: 最新的 props 参数

说明

一般通过比较 nextProps 和 this.props 值然后使用 setState 方法对 state 进行更新控制处理
父组件重新渲染，props 值不变时仍然会触发调用该周期函数
装载阶段【挂载阶段】不会触发，以及在组件内部调用了 setState 和 forceUpdate 也不会触发这两个函数

shouldComponentUpdate

componentWillUpdate/UNSAFE_componentWillUpdate

componentWillUpdate(nextProps, nextState)

1、参数

nextProps: 最新的 props 参数
nextState: 即将要更新的 state 对象说明
函数中不能执行 setState 方法【此时下一个 state 状态已经被确定，马上就要执行render 重新渲染了，否则会导致整个生命周期混乱】
不能请求一些网络数据，因为在异步渲染中，可能会导致网络请求多次，引起一些性能问题
如果你在这个方法里保存了滚动位置，也是不准确的，还是因为异步渲染的问题，如果你非要获取滚动位置的话，请在 getSnapshotBeforeUpdate 调用