【React】7、react新生命周期图文详解——最新版

系列文章目录

👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓
🍭持续更新中～希望大家能够喜欢，系列文章👉点这里
🌈博客主页👉点这里
👋回见～

1. 🔥React入门与概览（JSX语法）
2. 🔥面向组件编程——组件实例的三大核心属性state、props和refs超详解
3. 🔥受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
4. 🔥React函数的柯里化（什么？这玩意儿不仅能装x，还能优化代码？）
5. 🔥四行代码让我的cpu跑上90度——走进组件生命周期
6. 🔥图文详解react组件生命周期——React v16.8
7. 🔥react新生命周期图文详解——最新版
8. 🔥react-getSnapshotBeforeUpdate()生命周期函数详解

文章目录

前言

react生命周期在react17版本开始出现变化，旧生命周期请见👉上一篇文章

本文讲解的是建立在旧生命周期之上最新的生命周期，参考网站。

生命周期流程图（旧）

生命周期流程图（新）

对比新旧生命周期

从图中可以看出，新的生命周期（React17至今）与旧的生命周期而言，废弃了三个钩子，新增了两个钩子以代替废弃的三个钩子。

废弃的三个钩子分别是：

componentWillMount

、

componentWillReceiveProps

、

componentWillUpdate

.

这三个钩子🪝在将来的版本中很有可能废弃，当前版本使用时会出现警告⚠️，需要加上

UNSAFE_

前缀才能使用。

新增的两个钩子分别是：

getDerivedStateFromProps

和

getSnapshotBeforeUpdate

。

新生命周期流程

初始化阶段：由ReactDOM.render()触发—初次渲染

1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount

更新阶段：由组件内部 this.setState()或父组件重新render触发

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

卸载组件：由ReactDOM.unmountComponentAtNode触发

1. componentWillUnmount

重要的钩子🪝：

1. render：初始化渲染或更新渲染调用
2. componentDidMount：开始监听，发送ajax请求。
3. componentWillUnmount：做一些收尾的工作，如：清理定时器。

1、getDerivedStateFromProps

字面意思是：从props中获取派生的state。

理解：

// 几乎用不上，但是面试就不一样了，面试造火箭-入职拧螺丝// 若state 的值在任何时候都取决于 props时，可以使用这个函数staticgetDerivedStateFromProps(nextProps, prevState){
  console.log('Count-getDerivedStateFromProps', nextProps, prevState)// nextProps-count: '199', prevState-count: 0// 从props中得到派生的state（count：'199'）returnnull}

这个钩子在日常开发中几乎不怎么用得上，但面试官可不管你用不用得上啊！

所以我们还是来稍微探讨一下这个钩子🪝：

从名字上来看，这个钩子大致含义是

从props中获取派生的state

，官方文档的建议是，若state 的值在任何时候都取决于 props时，可以使用这个函数。

需要注意的是：这个钩子不是被放在实例对象上调用的，而是放在了类的自身上，所以定义这个钩子时需要在前面加上

static

关键字。

这个钩子中必须含有返回值，要么返回

null

，要么返回一个

state object

。

2、getSnapshotBeforeUpdate

字面意思是：在组件更新之前获取快照。

理解：

// 在组件更新之前获取快照，但此用法并不常见getSnapshotBeforeUpdate(prevProps, prevState){
  console.log('Count-getSnapshotBeforeUpdate')returnnull}

还是一样的道理，这个用法并不是常见，但这个新钩子🪝比上一个新钩子更有意义，比如你可以在需要刷新保持滚动位置时可以使用这个钩子🪝。

需要注意的是：这个钩子也必须有返回值（但是它是放在组件实例对象上的），返回值要么是

null

，要么是

snapshot value

。

什么是

snapshot value

呢？也就是一切你希望在组件更新前保留的值，比如表格的高度、滚动条的位置等等…你可以把它想象成组件的

日志备份

。

而官方文档中也明确说明了：

此生命周期的任何返回值将作为参数传递给

componentDidUpdate()

生命周期函数：

// 组件更新完毕的钩子componentDidUpdate(prevProps, prevState, snapshotValue){
  console.log('Count-componentDidUpdate', snapshotValue)}

我们可以在

componentDidUpdate

中接受到这个返回值（第三个参数）。

好啦～今天的文章就先到这里啦，如果在文章中发现错误还请各位道友私信我以便更改～

原创不易，如果对你有帮助的话，请不要吝啬你的三连哟✅～

感谢各位道友的支持✅回见～