React 重温之 组件生命周期

生命周期

任何事物都不会凭空产生，也不会无故消亡。一个事物从产生到消亡经理的各个阶段，我们称之为 生命周期。

具体到我们的前端组件上来，一个组件的生命周期可以大体分为创建、更新、销毁这个三个阶段。

本文主要介绍React 的组件生命周期，并以最新发布的v16为分水岭，介绍前后生命周期函数的变化。

组件生命周期

在React代码里，我们通常通过继承React.Component这个抽象基础类来定义一个有生命周期函数的组件（函数式生命无法自定义生命周期函数），react官方将其生命周期分为以下三个阶段：

装载

这个阶段是指组件初始化并插入DOM中，主要包含以下函数：

constructor()
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()

更新

当组件状态发生变化时，会触发一次更新

componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()

销毁

当组件从DOM中移除时，启动销毁：

componentWillUnmount()

具体如下图：

如上图所示，绿色背景为v16版本新增的生命周期函数，黄色背景的的为v16版本建议弃用，并在后续版本中会删除的生命周期函数。

其中getDerivedStateFromProps是一个静态函数，用来替换原来的componentWillMount函数，可以在这个静态函数中将props里的属性添加到state中去，这里应该是一个纯函数。

getSnapshotBeforeUpdate用来做一些必须要修改真实DOM的操作，虽然不建议这么做。

One more thing

React 同时提供一个componentDidCatch函数，来表明当前组件是一个边界错误处理组件，具体可以参考错误边界

参考链接