React 生命周期新旧对比

前言

React16.4版本之后使用了新的生命周期,它使用了一些新的生命周期钩子(getDerivedStateFromProps、getSnapshotBeforeUpdate),并且即将废弃老版的3个生命周期钩子(componentWillMount、componentWillReceiveProps、componentWillUpdate)。

生命周期修改的深层原因

因为React 16引入了Fiber机制 ,把同步 的渲染流程进化为了异步 的渲染流程,这么做的原因是同步渲染流程有个弊端:一旦开始就不能停下,大工作量的渲染任务执行时,主线程会被长时间的占用,浏览器无法即时响应与用户的交互。

Fiber机制会把渲染任务拆解为多个小任务,并且每执行完一个小任务,就把主线程的执行权交出去,也就解决了上面的弊端。

然而,采用Fiber机制进行渲染时,render阶段没有副作用,可以被暂停,终止或重新启动。就是这个重新启动,会导致工作在render阶段的componentWillMount、componentWillReceiveProps、componentWillUpdate存在重复执行的可能,所以它们几个必须被替换掉。

生命周期(旧)


挂载时

可以看出挂载时的更新数据顺序依次如下

1)constructor:构造器

2)componentWillMount:组件将要挂载

3)render:渲染

4)componentDidMount:组件挂载完成

父组件render

1)componentWillReceiveProps:组件将要接收属性

2)shouldComponentUpdate:组件是否应该更新

3)componentWillUpdate:组件将要更新

4)componentDidUpdate:组件完成更新

卸载时

componentWillUnmount:组件将要卸载时

组件卸载前调用的钩子函数,可以通过调用ReactDOM.unmountComponentAtNode函数检验

生命周期(新)


挂载时

1)constructor:构造器

2)getDerivedStateFromProps:从属性中得到派生的状态

3)render:渲染

4)componentDidMount:组件完成挂载

更新时

1)getDerivedStateFromProps:从属性中得到派生的状态

2)getSnapshotBeforeUpdate:更新前得到快照

3)componentDidUpdate:组件完成更新

卸载时

componentWillUnmount:组件将要卸载时

新旧生命周期的对比

1)可以看出,新生命周期中去掉了三个will钩子函数,分别是componentWillMount、componentWillUpdate、componentWillReceiveProps

原因查官方文档可知:这些生命周期方法经常被误解和滥用;此外,我们预计,在异步渲染中,它们潜在的误用问题可能更大。我们将在即将发布的版本中为这些生命周期添加 "UNSAFE_" 前缀。(这里的 "unsafe" 不是指安全性,而是表示使用这些生命周期的代码在 React 的未来版本中更有可能出现 bug,尤其是在启用异步渲染之后。)

2)新生命周期中新增getDerivedStateFromProps、getSnapshotBeforeUpdate

新的静态 getDerivedStateFromProps 生命周期方法在组件实例化之后以及重新渲染之前调用。它可以返回一个对象来更新 state,或者返回 null 来表示新的 props 不需要任何 state 的更新。

新的 getSnapshotBeforeUpdate 生命周期方法在更新之前(如:更新 DOM 之前)被调用。此生命周期的返回值将作为第三个参数传递给 componentDidUpdate。(通常不需要,但在重新渲染过程中手动保留滚动位置等情况下非常有用。)

相关推荐
Alice-YUE3 分钟前
前端速通 Agent:5 个项目,一条学习路径
前端·大模型·ai agent·学习路径·deerflow
是立不是利10 分钟前
前端分页逻辑与边界场景实战解析
前端·javascript
小聪70832 分钟前
elpis-core 动态组件扩展设计
前端
Amos_Web43 分钟前
Rspack 源码解析(七):Module、Chunk 与加载树优化
前端·rust·源码阅读
OpenTiny社区44 分钟前
从开发到运行:OpenTiny NEXT 如何构建 Agent 时代的 Web 应用?
前端·github·ai编程
愿得一猪蹄1 小时前
前端性能优化,Core Web Vitals 三个指标到底怎么改
前端
xy34531 小时前
Axure 9.0 中继器创建与设置步骤
前端·ui·html·axure·原型·产品设计
FEF前端团队1 小时前
01# Vibe Coding工作流设计思维:前端开发者的协作框架
前端·cursor·vibecoding
计算机魔术师1 小时前
OpenAI 发布模型错位报告框架,披露未发布模型自行修改自身指令案例
前端
特创数字科技1 小时前
公文Word一键批量排版工具|批量统一公文标准格式,办公自动化桌面小工具
前端·python