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

2022-10-28 12:06:11

文章目录

前言

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

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


生命周期流程图(旧)

在这里插入图片描述

生命周期流程图(新)

在这里插入图片描述

对比新旧生命周期

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

废弃的三个钩子分别是:componentWillMountcomponentWillReceivePropscomponentWillUpdate.

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


新增的两个钩子分别是:getDerivedStateFromPropsgetSnapshotBeforeUpdate

新生命周期流程

初始化阶段:由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中接受到这个返回值(第三个参数)。

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

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

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


  • 作者:codeMak1r.小新
  • 原文链接:https://codemak1r.blog.csdn.net/article/details/125024745
    更新时间:2022-10-28 12:06:11