组件更新的底层逻辑

news/2024/11/30 0:52:42/

第一种更新:组件更新的逻辑,当修改了相关状态,组件会更新

1.触发shouldComponentUpdate 周期函数:是否允许更新

shouldComponentUpdate(nextProps, nextState) {
// nextState: 存储要修改的最新状态
// this. state:存储的还是修改前的状态「此时状态还没有改变」
console. log(this.state, nextState); .
//此周期函数需要返回t rue/false
//返回true: 允许更新,会继续执行下一-个操作
//返回false: 不允许更新,接下来啥都不处理
return true;
}

2.触发时机componentWillUpdate周期函数:更新之前
此周期函数也是不安全的,在这个阶段,状态还没有被修改

3.修改状态值/属性值「让this. state. xxx改为最新的值」

4.触发render周期函数:组件更新

按照最新的状态/属性,把返回的JSX编译为virtua LDOM,和上一次渲染出来的virtua LDOM进行对比「DOM-DIFF」,把差异的部分进行渲染「渲染为真实的DOM」

5.触发componentD idUpdate周期函数:组件更新完毕

特殊说明:如果我们是基于this . forceUpdate()强制更新视图,会跳过shou ldComponentUpdate周期函数的校验,直接从WillUpdate开始进行更新,也就是:视图一定会触发更新!!!哪怕我们数据没有改变也会直接更新!!!!


第二种更新:父组件调用子组件

父子组件嵌套,处理机制上遵循深度优先原则:父组件在操作中,遇到子组件,一定是把子组件处理完,父组件才能继续处理

父组件第一次渲染
父willMount >父render->子willMount >子render >子didMounty >父didMount

父组件更新:
父shouldUpdate ->父willUpdate ->父render->子willReceiveProps ->子shouldUpdate ->子shoudComponentUpdate(如果为true才继续后面的步骤)->子willUpdate ->子render ->子didUpdate->父didUpdate

在这里插入图片描述


类组件和函数组件对比

函数组件是“静态组件”:
组件第一次渲染完毕后,无法基于"内部的某些操作”让组件更新,无法实现“自更新”;但是,如果调用它的父组件更新了,那么相关的子组件也
定会更新,可能传递最新的属性值进来;
1.函数组件具备:属性…「其他状态等内容几乎没有」
2.优势:比类组件处理的机制简单,这样导致函数组件渲染速度更快! !

类组件是“动态组件”:
组件在第一渲染完毕后,除了父组件更新可以触发其更新外,我们还可以通过: this. setState修改状态 或者this.forceUpdate 等方式,让组件实现"自更新”! !
1.类组件具备:属性、状态、周期函数、ref… r几乎组件应该有的东西它都具备」
2.优势:功能强大! !


http://www.ppmy.cn/news/310435.html

相关文章

C/C++ 开发环境和工具

http://www.csdn.net/article/2014-02-27/2818564-best-compilers-and-ides-for-c-programmers 1.Turbo C Turbo C是美国Borland公司的产品, 该公司在1987年首次推出Turbo C 1.0 产品, 其中使用了全然一新的集成开发环境, 即使用了一系列下拉式菜单,将文本编辑、程序…

记录并分享一下安卓通讯录导入到IPhone

仅仅记录一下我自己的步骤: 前提:我开始用的是诺基亚1202,黑白屏的功能机; 1.将卡放到安卓手机里面,用应用宝导出全部联系人为VCF后缀文件; 2.下载ITools,用它连接IPhone,导入到IPho…

关于人人网开发框架

前言 说起手机操作平台的发展先要说移动终端的发展,因为平台的发展离不开移动终端,近十年移动终端发展和未来移动终端趋势大体可分为以下四个个阶段: 相关厂商内容 送给光棍节的促销,电子商务的背后—《架构师》11月刊免费下载&am…

从数据库到可视化性能,5大数据分析工具盘点

都1202年了,不会还有小伙伴在做数据分析时,只知道用Python解决问题吧?随着大数据时代的来临,数据分析行业水涨船高,很多朋友都想通过学习数据分析掌握,进入时下多金的数据分析行业。 经常有小伙伴问我&…

应用软件漏洞利用分布

漏洞面临消亡 Adobe 公司在 2005 年收购 Flash,并大力推广应用使其一度是漏洞挖掘人员的研究焦点,根据图 3.4 的历史数据可以看到,2015 和 2016 年爆出的漏洞总数占据整体数量的 55.09%。在 Hacking Team 泄 露 CVE-2015-5122 和 CVE-2015-5…

【 Python 全栈开发 - 语法基础篇 - 15 】函数、递归(推)函数、匿名函数与内置函数

文章目录 一、函数(1)函数的构成函数名参数返回值 (2)局部变量与全局变量 二、递归函数与递推函数(1)递归函数(2)递推函数 三、匿名函数四、内置函数 一、函数 Python 函数是一段封…

Android垃圾分类助手APP(Java+Android Studio+SQLite)

wx供重浩:创享日记 对话框发送:69垃圾 获取完整源码源文件说明文档报告数据库文件等 开发运行环境 开发语言:Java 开发工具:Android Studio 模拟器:雷电模拟器9 数据库:SQLite 使用的核心类及组件 Activ…

http客户端Fegin

1.RestTemplate方式调用存在的问题 代码可读性差,编程体验不统一 参数复杂URL难以维护 2.Feign的介绍 Feign是声明式的http客户端(只需要将发http请求的信息写出即可) 主要基于SpringMvc的注解来声明远程调用的信息: 步骤&…