系列文章目录
👏欢迎来到我的React系列文章
🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列
🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界
🍭本系列会从React v16.8 开始 => 直到React v 18.0 新版旧版一起抓
🍭持续更新中～希望大家能够喜欢，系列文章👉点这里
🌈博客主页👉点这里
👋回见～
- 🔥React入门与概览（JSX语法）
- 🔥面向组件编程——组件实例的三大核心属性state、props和refs超详解
- 🔥受控组件与非受控组件（vue和react的双向绑定分别是怎么实现的？）
- 🔥React函数的柯里化（什么？这玩意儿不仅能装x，还能优化代码？）
- 🔥四行代码让我的cpu跑上90度——走进组件生命周期
- 🔥图文详解react组件生命周期——React v16.8
- 🔥react新生命周期图文详解——最新版
- 🔥react-getSnapshotBeforeUpdate()生命周期函数详解
文章目录
前言
react生命周期在react17版本开始出现变化，旧生命周期请见👉上一篇文章
本文讲解的是建立在旧生命周期之上最新的生命周期，参考网站。
生命周期流程图（旧）
生命周期流程图（新）
对比新旧生命周期
从图中可以看出，新的生命周期（React17至今）与旧的生命周期而言，废弃了三个钩子，新增了两个钩子以代替废弃的三个钩子。
废弃的三个钩子分别是：
componentWillMount
、
componentWillReceiveProps
、
componentWillUpdate
.
这三个钩子🪝在将来的版本中很有可能废弃，当前版本使用时会出现警告⚠️，需要加上
UNSAFE_前缀才能使用。
新增的两个钩子分别是：
getDerivedStateFromProps
和
getSnapshotBeforeUpdate
。
新生命周期流程
初始化阶段：由ReactDOM.render()触发—初次渲染
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
更新阶段：由组件内部 this.setState()或父组件重新render触发
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
卸载组件：由ReactDOM.unmountComponentAtNode触发
- componentWillUnmount
重要的钩子🪝：
- render：初始化渲染或更新渲染调用
- componentDidMount：开始监听，发送ajax请求。
- 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. 所有， 如有侵权，请联系我们删除。