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函数，来表明当前组件是一个边界错误处理组件，具体可以参考错误边界

参考链接

总结

以上是生活随笔为你收集整理的React 重温之 组件生命周期的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。