react新出来两个钩子函数是什么?和删掉的will系列有什么区别?

2023-11-07

react新旧生命周期的区别?

1、新生命周期中去掉了三个will钩子,分别为componentWillMount、componentWillReceiveProps、componentWillUpdate;
2、新生命周期中新增了两个钩子,分别为getDerivedStateFromProps(从props中得到衍生的state)和getSnapshotBeforeUpdate。
react生命周期(旧):

 react生命周期(新):

新的生命周期新增的两个钩子:

  • getDerivedStateFromProps
  • getSnapshotBeforeUpdate

1.getDerivedStateFromProps
getDerivedStateFromProps:从props中得到衍生的state
接受两个参数:props,state

会在调用 render 方法之前调用,即在渲染 DOM 元素之前会调用,并且在初始挂载及后续更新时都会被调用。

state 的值在任何时候都取决于 props。

getDerivedStateFromProps 的存在只有一个目的:让组件在 props 变化时更新 state。

该方法返回一个对象用于更新 state,如果返回 null 则不更新任何内容。

使用场景:若state的值在任何时候都取决于props,那么可以使用getDerivedStateFromProps

2.getSnapshotBeforeUpdate
getSnapshotBeforeUpdate:在更新前拿到快照(可以拿到更新前的数据)

在更新DOM之前调用

返回一个对象或者null,返回值传递给componentDidUpdate

componentDidUpdate():更新DOM之后调用

接受三个参数:preProps,preState,snapshotValue

废弃的原因:


在React16的Fiber架构中,调和过程会多次执行will周期,不再是一次执行,失去了原有的意义。此外,多次执行,在周期中如果有setState或dom操作,会触发多次重绘,影响性能,也会导致数据错乱。
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react新出来两个钩子函数是什么?和删掉的will系列有什么区别? 的相关文章

随机推荐

  • qt中实现绘制图形与截图

    引言 实现可以选择线型 线宽 颜色 是否填充图形来绘制各种常见的图形 同时可以选择矩形区域来实现截图 效果 绘图的效果如上 截图的效果 实现 项目使用的qt5 13 2 编译器为MSVC2017 64bit 该项目是基于基类QWidget创
  • 多重继承和多继承, super, __mro__

    继承 父类派生子类 子类继承父类 通过继承 可以让子类去拥有父类中的属性和方法 而不必重新编写相同的代码 并且可以在父类的基础上添加新的属性和功能 在继承的同时 子类还可以重写父类中的方法 从而获取与父类不同的功能 实现多态 在 Pytho
  • 【华为OD机试真题 JS】报数游戏

    标题 报数游戏 时间限制 1秒 内存限制 262144K 语言限制 不限 100个人围成一圈 每个人有一个编码 编号从1开始到100 他们从1开始依次报数 报到为M的人自动退出圈圈 然后下一个人接着从1开始报数 直到剩余的人数小于M 请问最
  • TypeScript中的keyof、typeof、索引访问类型、条件类型

    一 keyof类型操作符 TypeScript中的keyof类型操作符可以获取某个类型的所有属性名组成的联合类型 这个操作符的作用是帮助开发者在静态类型检查中更准确地操作属性名 举例来说 如果我们有如下一个接口 interface Pers
  • Xcode多视图应用Tab Bar Controller、Table View Controller2021-04-10

    1 视图控制器 首先应该理解Xcode里的视图控制器一般以controller结尾 在storyboard中添加的每一个视图控制器都有一个默认的名字如View Controller 标识符 可以修改视图控制器的title属性 改它的名字 点
  • 编译执行与解释执行的区别

    今天在看到一篇关于分层编译优化的文章时 看到了解释执行与编译执行两个专业词汇 看着熟悉 但不甚理解 然后在网上搜索了一下 说一下自己的理解 对于我们平时写的代码 一般计算机是没办法直接识别的 需要相应的编译器将其编译层机器代码 一些计算机可
  • AI绘画关键词网站推荐 :轻松获取百万个提示词!完全免费

    一 lexica art 该网站拥有数百万Stable Diffusion案例的文字描述和图片 可以为大家提供足够的创作灵感 使用上也很简单 只要在搜索框输入简单的关键词或上传图片 就能为你提供大量风格不同的照片 点击照片就能看到完整的AI
  • uniapp调用地图,进行位置查询,标记定位

    这周开会又新增一个小功能 就是需要通过身份证号 手机号在地图查询 后台返回经纬度 标记位置 想着挺麻烦 做的时候发现没啥技术 分享给大家
  • JDK,JRE和JVM三者间关系

    JDK是什么 JDK Java Development Kit Java开发工具包 是针对Java开发程序员的产品 是整个Java的核心 包含Java运行环境JRE Java工具和Java基础类库 具有3个主要组成部分 1 Java 编程语
  • java重试工具库: 实现业务逻辑与重试逻辑的解耦

    对于开发过网络应用程序的程序员来说 重试并不陌生 由于网络的拥堵和波动 此刻不能访问服务的请求 也许过一小段时间就可以正常访问了 比如下面这段给某个手机号发SMS的伪代码 发送SMS public boolean sendSMS Strin
  • chrome打开开发者工具(F12)之后看不到请求头信息

    开发者工具的network窗口能够查看浏览器的请求头以及响应头信息 但是有时打开开发者工具会遇到像下图这种情况 找不到请求信息 无法查看请求头 或响应头 解决方法 点击 Filter 按钮 也就是图中的漏斗形状的按钮 下面会多出一系列选项
  • 选择 dwm 作为窗口管理器的 4 大理由分析

    导读 我喜欢极简 如果可能 我会尽量在一个终端下运行所有需要的程序 这避免了一些浮夸的特效占用我的资源或者分散我的注意力 而且 无论怎么调整窗口大小和位置却依旧无法使它们完美地对齐 这也让我感到厌烦 出于对极简化的追求 我喜欢上了 Xfce
  • 14.SpringData-Mongo

    SpringData Mongo Spring data对MongoDB做了支持 使用spring data mongodb可以简化MongoDB的操作 封装了底层的mongodb driver 地址 https spring io pro
  • opencv图像畸变矫正:源码学习

    参考资料 相机标定 4 矫正畸变 undistort 和initUndistortRectifyMap 背景 opencv提供了直接进行畸变矫正的代码 因在项目中需要使用畸变矫正 因此研究一下opencv中畸变矫正的相关接口与代码 便于学习
  • 凸优化学习(六)——一个简单的对偶实例

    注意 本文内容来自于吴恩达老师cs229课堂笔记的中文翻译项目 https github com Kivy CN Stanford CS 229 CN 中的凸优化部分的内容进行翻译学习 2 一个简单的对偶实例 作为对偶的一个简单应用 在本节
  • 最接近的三数之和

    题目描述 给你一个长度为 n 的整数数组 nums 和 一个目标值 target 请你从 nums 中选出三个整数 使它们的和与 target 最接近 返回这三个数的和 假定每组输入只存在恰好一个解 示例 输入 nums 1 2 1 4 t
  • (计算机复试考研)操作系统重点知识梳理

    1 操作系统引论 操作系统 配置在计算机硬件上的第一层软件 是对硬件系统的首次扩充 为用户和应用程序提供一个简单接口 定义 一组能有效组织和管理计算机硬件和软件的资源 合理地对各类作业进行调度 方便用户使用的程序的集合 操作系统的目标 1
  • C++线程池的实现

    池式结构 在计算机体系结构中有许多池式结构 内存池 数据库连接池 请求池 消息队列 对象池等等 池式结构解决的主要问题为缓冲问题 起到的是缓冲区的作 线程池 通过使 线程池 我们可以有效降低多线程操作中任务申请和释放产 的性能消耗 特别是当
  • Android OpenGL ES零基础系列(三):OpenGL ES的渲染管道及VertexShader与FragmentShader

    前言 在前2篇文章中 我们都说到着色器 且在第二篇中正式说到 这着色器只能用在OpenGL ES2 x等可编程管道里面 而在OpenGL ES1 x是不能用的 但我们一直没有说这是为什么 两者有什么区别 那这篇我们就一起来学习下OpenGL
  • react新出来两个钩子函数是什么?和删掉的will系列有什么区别?

    react新旧生命周期的区别 1 新生命周期中去掉了三个will钩子 分别为componentWillMount componentWillReceiveProps componentWillUpdate 2 新生命周期中新增了两个钩子 分