react学习3 生命周期

news2024/11/16 7:55:27

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应用开发中需要灵活选择最适合场景的更新优化方式,以实现高效的页面渲染。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python3安装pyhanlp最佳解决方法

1、Hanlp介绍 Hanlp是一款中文自然语言处理工具。Hanlp支持多种自然语言处理任务,包括分词、词性标注、命名实体识别、依存句法分析、情感分析、文本分类等。其主要优点包括: 高准确率:Hanlp采用了基于神经网络的分词方法,有效提…

关于字符集

字符集 编码与解码 计算机中储存的信息都是用二进制数表示的,而我们在屏幕上看到的数字、英文、标点符号、汉字等字符是二进制数转换之后的结果。按照某种规则,将字符存储到计算机中,称为编码 。反之,将存储在计算机中的二进制数…

【老王读SpringMVC-7】Controller method 的异常返回值处理

通过前面分析 Controller method的执行过程,我们知道, handler method 的执行是通过调用 ServletInvocableHandlerMethod#invokeAndHandle()。 执行过程中的异常全部会往上抛出,然后由 DispatcherServlet 来处理。 DispatcherServlet 会调用 …

MATLAB第十章_图像处理算法

目录 图像处理算法 图像处理基础 图像处理函数 默认显示方式 添加颜色条 显示多帧图像 显示动画 三维材质图像 图像的直方图 灰度变换 均衡直方图 图像处理应用 图像增强 图像重建 图像变换 图像压缩 图像分割 图像边缘检测 图像识别 图像处理算法 图像处理…

化繁为简,在线表单工具值得一试!

在办公职场中,经常听到不少人抱怨:表单制作效率低、数据整理麻烦等,这个时候不少办公职员是多么希望能有一整套完善的表单制作工具来满足办公需求,快速提升办公协作效率。不要着急,如今是产业分工新时代,在…

Linux终端环境下的浏览器Lynx和Carbonyl 的基本使用方法

一、Carbonyl 是基于Chromium开发的运行于终端下的现代版浏览器,比Lynx的功能更好,目前尚在滚动开发过程中,但也基本可以用了。 1. 2安装非常简单,下载Binaries,Docker,nmp install, 都可以。 注意&#…

智能电表怎么实现远程抄表

智能电表是一种新型的电表,它可以实现远程抄表的功能。智能电表的远程抄表是通过无线网络或有线网络来实现的,这使得抄表变得更加方便和快捷。本文将介绍智能电表如何实现远程抄表的技术原理和实现方法。 一、技术原理 智能电表的远程抄表是通过将电表与…

定了 香港新政6月1日生效 散户交易加密货币正式合法化!

如今,香港虚拟资产交易的各项准备工作已准备就绪。5月23日,香港证监会(SFC)详细介绍了各界参与虚拟资产交易的咨询总结文件,宣布《适用于虚拟资产交易平台营运者的指引》将于2023年6月1日生效。 SFC行政总裁梁凤仪表示…

2023 最全 Java 面试八股(涵盖所有 Java 核心面试知识点),立刻收藏

2022 已成为过去式,不论这一年好与坏,我们都需要抓住新一年的机会,跳槽涨薪,还是学习提升!先给自己定一个小目标,然后再朝着目标去努力就完事儿了!为了帮大家节约时间,给大家搞来了 …

2023 华为 Datacom-HCIE 题库 02--含解析

单选题 1.[试题编号:189785] (单选题)如图所示,VTEP1上在BD20域内开启了ARP广播抑制功能,并且VTEP1通过 BGP EVPN路由学习到了PC2的ARP信息,则PC1发送的针对PC2的ARP请求,VIEP1在转发给VIEP2时…

SpringCloud(23):Sentinel对Spring Cloud Gateway的支持

代码地址:https://download.csdn.net/download/u013938578/87767363 从 1.6.0 版本开始,Sentinel 提供了 Spring Cloud Gateway 的适配模块,可以提供两种资源维度的限流: route 维度:即在 Spring 配置文件中配置的路…

ChatGPT 入门教程||ChatGPT 应用场景1:让AI回答问题||ChatGPT应用场景2:基于已有的示例回答

ChatGPT 应用场景1:让AI回答问题 这个场景应该是使用 AI 产品最常见的方法。以 ChatGPT 为例,一般就是你提一个问题,ChatGPT 会给你答案,比如像这样: 在这个场景下,prompt 只要满足前面提到的基本原则&am…

通过opencv与神经网络对滑动验证码的一次深入学习

好久没写博客了,人到中年,有点儿犯懒。 从信息安全行业,又去了IT合规领域,与信息安全结合还是两手抓,两手都不硬。 由于工作原因,需要获取一个token来请求接口,奈何没有现成的接口&#xff0c…

记一次Android页面卡顿排查总结

背景:更新完gosdk(端上的主要逻辑在go层完成)后,冷启动时首页明显会卡一下 问题排查: 1、通过在application onCreate()中设置getMainLooper().setMessageLogging(new LxLogPainter());来查看耗时的日志,…

cfssl使用方法重新整理说明

下载安装: #下载cfssl、cfssl-json、cfssl-certinfo文件 wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 -O /usr/bin/cfssl wget https://pkg.cfssl.org/R1.2/cfssljson_linux-amd64 -O /usr/bin/cfssljson wget https://pkg.cfssl.org/R1.2/cfssl-certinfo…

低代码开发:构建企业数字化生态系统的秘密武器!

目前,我们正处于数字化时代,而企业数字化早已是大势所趋,也是因为企业数字化转型是提高企业效率与竞争力的必经之路。 发展背景 近年来,伴随着人工智能、大数据分析技术、云计算等领域的迅速发展,不少企业开始正视数字…

【How to Design Translation Prompts for ChatGPT: An Empirical Study 论文略读】

How to Design Translation Prompts for ChatGPT: An Empirical Study 论文略读 INFORMATIONAbstract1 Introduction2 Background3 Experiments3.1 Prompt Design3.2 Experimental Setup3.2.1 Datasets3.2.2 Baselines and Evaluation Metrics 3.3 Multilingual Translation3.4…

接入支付宝沙箱环境

1、这里有几个重要数据要拿到,一个是支付宝的公钥和私钥,一个是支付的网关,和支付的APPID。这几个数据是要写到代码中的 官方手册:文档地址 1.1 配置沙箱应用环境 https://openhome.alipay.com/develop/sandbox/app 1.2 配置接口…

Git忽略文件的几种方法,以及.gitignore文件的忽略规则

Git忽略文件的几种方法,以及.gitignore文件的忽略规则 .gitignore文件定义Git全局的.gitignore文件Git 忽略规则Git忽略规则的优先级.gitignore文件忽略规则常用匹配示例: 关于.gitignore规则不生效的问题 不忽略没有后缀名的文件搜索电脑里没有后缀的文…

请问你如何理解以下的歌词“unravel - TK from 凛冽时雨 (TK from 凛として時雨)为什么很多人说崖山海战以后无中国

目录 请问你如何理解以下的歌词“unravel - TK from 凛冽时雨 (TK from 凛として時雨) 为什么很多人说崖山海战以后无中国 请问你如何理解以下的歌词“unravel - TK from 凛冽时雨 (TK from 凛として時雨) 以下是我对《unravel - TK from 凛冽时雨》这首歌词的理解&#xff1…