react学习3 生命周期

componentDidMount()与render()一个级别的,在组件挂载完成之后调用

 卸载组件:REACTDOM.unmountComponentAtNode()

componentWillUnmount() 组件马上被卸载的时候

老生命周期:

 

 新的生命周期:

废弃了(加上Unsate_还是能继续用)三个带will的钩子,新增了两个场景罕见的钩子,暂时先不学了,用到的时候再说吧。

getDerivedStateFromProps是React生命周期中的一个静态方法,它在组件收到新的props或state时被调用,然后返回一个新的state,这个state会覆盖现有的state。它的主要目的是处理props的变化,从而更新组件的state。

使用getDerivedStateFromProps可以使React组件在接收到props变化时,根据新的props计算出一个新的state,这样就可以实现在组件接收到props变化时重新渲染组件。需要注意的是,在使用getDerivedStateFromProps时应该避免在返回值中使用this.props或this.state,因为这样会导致副作用。

需要注意的是,虽然getDerivedStateFromProps可以在props变化时更新state,但另一个钩子函数componentDidUpdate也可以实现相同的功能。因此,在使用getDerivedStateFromProps时需要进行权衡和选择,以确保使用适合当前情况的方法。

getSnapshotBeforeUpdate是React组件的生命周期函数之一,它在组件更新之前被调用。它的返回值将作为componentDidUpdate()的第三个参数,用于在更新后获取组件状态或DOM元素的快照。

使用getSnapshotBeforeUpdate可在组件更新后获取更新前的状态或DOM元素快照,并根据这些信息对组件进行优化或处理。例如,在组件更新前获取某个DOM元素的高度,然后在更新后进行一些操作,以确保DOM元素保持不变,从而避免出现闪烁等视觉上的不一致。

需要注意的是,在使用getSnapshotBeforeUpdate时,需要特别留意处理逻辑的实现细节,以确保数据的正确性和组件的稳定性。使用不当可能导致组件出现异常或界面变得不稳定。因此,该方法只应该在必要的情况下使用,以避免增加不必要的复杂性和风险。

React的Diffing算法:也叫虚拟DOM的Diffing算法,是React实现高效更新界面的重要技术之一。

React的Diffing算法的核心是通过对比虚拟DOM树的差异来减少实际DOM操作的次数,从而提升页面渲染的效率。相比传统的DOM操作方式,React先通过JSX语法生成虚拟DOM树,然后对比新旧虚拟DOM树的差异,只更新变化的部分。

React的Diff算法具体实现如下:

1. 首先比较根节点是否相等,如果不相等,则替换整个UI树。

2. 对比同层节点,如果节点类型不一样,则直接替换;如果节点类型相同但是属性不同,则更新属性,这样虚拟DOM树和真实DOM树就一致了。

3. 对比同层节点的子节点,找出差异后只更新需要更新的部分,而其他部分则不作出任何改变。

4. 最后,React会把所有需要更新的节点一次性更新到真实DOM树中,以减少实际DOM操作的次数。

需要注意的是,Diff算法的实现可能会受到数据结构和更新状态等因素的影响。因此,在React应用开发中需要灵活选择最适合场景的更新优化方式,以实现高效的页面渲染。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/22467.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ --- 死信交换机(一)

前言 当我们在使用消息队列时,难免会遇到一些消息被拒绝,重复投递或者超时等异常情况。这些异常消息如果不被正确处理,将会阻碍整个消息系统的正常运行。而此时,死信交换机(Dead Letter Exchange,简称DLX&…

FAT NTFS Ext3文件系统有什么区别

10 年前 FAT 文件系统还是常见的格式,而现在 Windows 上主要是 NTFS,Linux 上主要是Ext3、Ext4 文件系统。关于这块知识,一般资料只会从支持的磁盘大小、数据保护、文件名等各种维度帮你比较,但是最本质的内容却被一笔带过。它们最…

MySQL-索引(2)

本文主要讲解MySQL-索引相关的知识点 联合索引前缀索引覆盖索引索引下推索引的优缺点什么时候适合创建索引,什么时候不适合?如何优化索引 ? 索引失效场景 ? 为什么SQL语句使用了索引,却还是慢查询 ? 使用索引有哪些注意事项 ? InnoDB引擎中的索引策略 目录 联合索引 联合…

【C++】函数重载 - 给代码增添多彩的魔法

欢迎来到博主 Apeiron 的博客,祝您旅程愉快 ! 时止则止,时行则行。动静不失其时,其道光明。 目录 1、缘起 2、函数重载概述 3、函数重载注意事项 4、总结 1、缘起 函数重载,是编程世界中的一抹迷人色彩&#xff0c…

动态规划-状态压缩DP

[SCOI2005] 互不侵犯 题目描述 https://www.luogu.com.cn/problem/P1896 在NN的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案。国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子。 …

堪比ChatGPT,Claude注册和使用教程

新建了一个网站 https://ai.weoknow.com/ 每天给大家更新可用的国内可用chatGPT资源 Claude简介 Claude是一款人工智能聊天机器人。主要有以下特征: 使用自己的模型与训练方法,而不是基于GPT-3等开源框架。模型采用Transformer编码器与解码器的结构,并使用对话上下文的双向…

实验六 自动驾驶建模与仿真

【实验目的】 了解Matlab/Simulink软件环境,熟悉Simulink建模步骤;了解车辆运动控制的基本原理,学会简单的车辆运动控制建模及仿真;了解自动驾驶建模的基本过程,了解典型ADAS系统模型的应用特点。了解自动驾驶相关函数…

老司机解读香农定理、奈奎斯特定理、编码与调制

工程师都会考虑一个问题:信道上到底可以传输多大的数据,或者指定的信道上的极限传输率是多少。这就是信道容量的问题。例如,在xDSL系统中,我们使用的传输介质是仅有几兆带宽的电话线,而上面要传送几兆、十几兆甚至几十…

用 Python 写 3D 游戏

vizard介绍 Vizard是一款虚拟现实开发平台软件,从开发至今已走过十个年头。它基于C/C,运用新近OpenGL拓展模块开发出的高性能图形引擎。当运用Python语言执行开发时,Vizard同时自动将编写的程式转换为字节码抽象层(LAXMI),进而运行…

WorkPlus AI助理 | 将企业业务场景与ChatGPT结合

近年来,人工智能成为了企业数字化转型的热门话题,作为被训练的语言模型,ChatGPT具备模拟对话、回答问题、写代码、写小说、进行线上内容创作的能力,还能根据聊天的上下文进行互动。作为一款新兴的人工智能应用程序,对于…

【IDEA】DeBug(图文并茂)

文章目录 01_Debug简介和意义02_IDEA中的Debug步骤03_跳转到当前代码执行的行04_步过调试的使用05_步入调试的使用06_强制步入调试的使用07_步出调试的使用08_回退断点调试的使用09_运行到光标处10_计算表达式11_条件断点12_多线程调试 IDAEA(Interactive Data Anal…

【Linux高级 I/O(3)】如何使用阻塞 I/O 与非阻塞 I/O?——poll()函数

poll()函数介绍 系统调用 poll()与 select()函数很相似,但函数接口有所不同。在 select()函数中,我们提供三个 fd_set 集合,在每个集合中添加我们关心的文件描述符;而在 poll()函数中,则需要构造一个 struct pollfd 类…

分享18个好用的ChatGPT插件

上周ChatGPT又进化了,支持联网还有70几种第三方插件,不过还是老样子,只服务氪金玩家,免费端可能还得等等。之前只开放了俩插件,网络浏览器和代码解释器,只能说是真的不够用。 ChatGPT:不够&…

(一)before initialization of D3D(初始化D3D之前你需要了解的D3D基础知识)

什么是D3D? D3D全称Direct X 3D,即一组API可以用来针对GPU编程,不过他最主要的作用是用来渲染(不过现在也有很多其他应用比如d3d11va[Direct X 3D 11 Video API]用来进行硬件加速解码) Tips:Direct X 3D主要用来渲染,既然我们说到可以针对GPU编程了,当然不只是渲染的工作可以…

布隆过滤器和布谷鸟过滤器

过滤器使用场景: 比如有如下几个需求: 1.原本有10亿个号码,现在又来了10万个号码,要快速准确判断这10万个号码是否在10亿个号码库中?   解决办法一:将10亿个号码存入数据库中,进行数据库查询&…

iptables防火墙

iptables防火墙 一、iptables概述1.netfilter 与 iptables 的关系1)netfilter2)iptables 2.四表五链1)四表2)五链3)表的匹配优先级4)规则链之间的匹配顺序5)规则链内的匹配顺序 二、iptables防火…

CodeForces.1806A .平面移动.[简单][判断可达范围][找步数规律]

题目描述: 题目解读: 给定移动规则以及起始点,终点;分析终点是否可达,可达则输出最小步数。 解题思路: 首先要判定是否可达。画图可知,对于题目给定的移动规则,只能到达起始点(a,b…

AWD竞赛全流程解析

AWD(Attack With Defense,攻防兼备)是一个非常有意思的模式,你需要在一场比赛里要扮演攻击方和防守方,攻者得分,失守者会被扣分。也就是说,攻击别人的靶机可以获取 Flag 分数时,别人会被扣分,同…

【数据分享】我国地级市绿地利用现状数据(9个指标\Shp格式)

绿地是城市生态的重要组成部分,在很多分析中都会用到绿地数据!之前我们分享过Shp和Excel格式的全国地级市2003-2020年绿地面积数据(可查看之前文章获悉详情),以及中国31个主要城市的绿地空间分布的栅格数据&#xff08…

ARM的读写内存指令与栈的应用

1.基础读写指令 写内存指令:STR MOV R1, #0xFF000000 MOV R2, #0x40000000 STR R1, [R2] 将R1寄存器中的数据写入到R2指向的内存空间 需注意,此命令是将R1中的数据写给R2所指向的内存空间,而不是直接把R1的数据赋给R2,R2寄存器…