从源码的角度再看 React JS 中的 setState

截图

在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用。

在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState “诡异”表现的原因。

源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可。

1. React 中的 setState 更新逻辑代码

在更新逻辑的部分,可以看到 React 会通过 batchingStrategy.isBatchingUpdates 判断当前的逻辑状态下是否需要进行批量更新。

  • 如果不是,那么就直接进行页面的批量更新,将之前累积的所有状态一次更新到组件上。就是类似我们上一篇文章中举例的快递点一次将所有的快递寄出。

  • 如果是,那么所有的组件状态不进行立即更新,而是将组件状态存放在一个叫 dirtyComponents 的数组中去,等待下次更新时机的到来再进行更新。

截图

源码地址

2. React 中的 Transaction 设计

为了实现上述的更新逻辑,React 设计了 Transaction 的逻辑,看起来也像是数据库中的事务。
源码中如图所示,给出了一幅图以及大段的解释。

React 将整个的函数执行过程包裹上了 Transaction,在函数执行前与执行后分别有 initializeclose 两个方法。

这样的话 React 就有时机在函数执行过程中,涉及到 setState 的执行,都将缓存下来,在 close 的时候进入到 React 的 state 更新逻辑进行更新判断操作,并最终更新到前台的 DOM 上。

截图

源码地址

其实 Virtual DOM 的框架都会有这样的设计逻辑,理解了这样的底层设计才能很好地理解一些方法在前台的表现行为。

Vue.js 中也有类似的设计逻辑,后续如果有时间我们将继续进行相关讨论。

下一篇文章,我们继续来看 React 底层是如何进行 batchingStrategy 的设计以及更新状态的转换的。

转载于:https://www.cnblogs.com/parry/p/8891478.html

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

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

相关文章

科普|深度解析5G与未来天线技术

来源:电子万花筒过去二十年,我们见证了移动通信从1G到4G LTE的转变。在这期间,通信的关键技术在发生变化,处理的信息量成倍增长。而天线,是实现这一跨越式提升不可或缺的组件。按照业界的定义,天线是一种变…

python的百分号和斜杠 除_关于python:如何替换除字母,数字,正斜杠和反斜杠之外的所有字符...

想要解析文本并仅返回字母,数字,正斜杠和反斜杠,并用替换所有其他斜杠。是否可以仅使用一种正则表达式模式,而不是随后需要循环的几种正则表达式模式? 无法获取下面的样式,不能替换正斜杠。line1 "1/R…

php-curl-class,一个简单PHP CURL类

这里要说明一下...这个类的形成是参考了晚上前辈们的代码加上我自己的理解见解而集成的...前辈们的代码出处已经忘记了我在这里感谢这些前辈们给我的启发...希望这个类能给大家带来帮助...如果有不足的地方...请大家多多指点指点这是一个PHP CURL的类public $cookieFile; …

input输入数字验证

function clearNoNum(obj){obj.value obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符obj.value obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的obj.value obj.value.replace(".","$#$").repl…

平行进化论再添证据 牙形刺远隔千里却发育模式相同

来源:科技日报记者:聂翠蓉平行进化观点认为,具有共同祖先的有机体即使彼此被分隔在相距千里的不同地域,也会以同样的方式进化。据物理学家组织网11月23日报道,德国爱尔兰根-纽伦堡大学和加拿大卡尔加里大学的古生物学家…

word光标一直闪动_6个一分钟就能学会的Word实用小技巧,你会几个?【Word教程】...

点击图片 1元抢购 Excel、Word、PPT全套课程你用word有几年了?一年、两年、三年......甚至更久?我相信你应该也是曾受到Word折磨的人吧!为什么?因为曾有很多人都不知道Word的一些小技巧,因此工作上浪费了不少时间。于…

timewait php,timewait是什么意思

一、IME_WAIT的意思是结束了这次连接。二、以tcp中time_wait状态为例如下:1、简单来说:time_wait状态是四次挥手中server向client发送FIN终止连接后进入的状态。2、从上图能够看到time_wait状态存在于client收到serverFin并返回ack包时的状态 &#xff0…

DARPA新局长维多利亚·科尔曼展望未来发展

来源:空天防务观察2020年11月20日,美空军协会《空军杂志》网站报道称,在入主美国防部国防高级研究计划局(DARPA)之前,新任局长维多利亚科尔曼(Victoria Coleman)大多数职业生涯都在五…

死磕JDK源码之String

String本质是对char数组的封装 Serializable接口 实现Serializable接口的类可以被序列化 Comparable接口 实现Comparable接口的类可以支持排序,需要重写的compareTo方法返回两个字符串中第一个不同的字符的ASCII码差值 CharSequence接口 多态,String、St…

一个神奇的测试_这4个在线黑科技工具拥有神奇的魔法,值得收藏!

本期神器妹分享4个超实用在线黑科技工具,其典型特点就是无需安装任何软件,打开网址就可以使用,另外就是个个都有其独到之处,用起来也很爽。下面来详细介绍这4个工具:2.万能命令这是一个神奇的在线工具效率平台&#xf…

php task todolist,Todolist--(4)登录

login.php登录页面session_start();$dbcmysqli_connect(127.0.0.1, root,123456,todolist)or die(could not connect to mysql);mysqli_set_charset($dbc,utf8);$errorarray();if($_SERVER[REQUEST_METHOD]POST){if(!empty($_POST[username])){$username$_POST[username];}else…

量子纠缠背后的故事(廿五):深藏幕后的神秘力量

来源:程鹗科学网博客。链接地址:http://blog.sciencenet.cn/blog-3299525-1259740.html 还只有四五岁时,爱因斯坦有次生病,父亲给了他一个指南针玩耍。小小的爱因斯坦立刻着了迷。成年后,他多次回顾那次经历&#xff0…

Python day7之mysql

写在前面: 由于毕业论文撰写和答辩耽搁了几个月,但是在这几个月没有放弃学习Python,就是没有时间写博客。进行我们主要对数据库mysql的操作指令集的学习。 一、mysql术语 Mysql是最流行的关系型数据库管理系统,接下来介绍术语。 数…

vuerouter传参方式_VUE Router学习原理(一)

点击蓝字 关注我们Vue Router一. 安装二. 导入三. 说明四. 使用4.1 静态页面跳转4.2 动态页面跳转4.3 子路由4.4 通过程序传参4.5 同时(同级)展示多个视图4.6 导航钩子壹安装shellcnpm i vue-router -S贰导入jsimport Vue from vue;import VueRouter from vue-router;Vue.use(V…

php为图片添加渐变背景,HTML_CSS实例:通过定义渐变边框给图片加阴影,一般我们可以使用背景图的方 - phpStudy...

CSS实例:通过定义渐变边框给图片加阴影一般我们可以使用背景图的方式给图片添加阴影,但对于不固定尺寸的图片如何实现呢?我们可以采取“视觉欺骗大法”——定义渐变边框来实现代码:body {background:#2e334d;}img {border:none;}a.pic-shadow…

Nature:新聘“诺奖级泰斗”研究揭示大脑中执行不同认知功能环路之间的协同作用

| 中科院神经所官网报道大脑的一个核心功能是创造和保留外部世界的内在表征并指导行为,记忆(Memory)一词指的就是这种 "保留"。传统来说,人们认为记忆包括三个主要过程:编码(Encoding&#xff09…

Java基础11-封装(思想、访问权限、this、构造方法)

一、什么是封装呢? 封装是面向对象的三大特征之一。 隐藏对象的属性和实现细节,仅对外提供公共的访问方式。 ①封装就是将面对对象的状态和行为看成是一个整体,将二者存放在一个独立的模块中,比如说类 ②封装也是信息隐藏&#xf…

值对于 int32 太大或太小_怎样将视频文件变小却对画质没有太大影响呢?

不管是我们平时没事儿时喜欢追的电视剧,电影,还是自己拍的视频,我们经常会遇到一个问题,就是视频文件太大,导致想要将好看好玩的视频传到手机上时,上传时间太长,而且有的时候可能上传了一半却又…

matlab神经网络动量因子,bp神经网络的动量因子

基于自适应动量因子的 BP 神经网络优化方法研究 王锦[1]; 赵德群[1]; ...1? n为训练次数,η为动量因子,一般取0.95左右 18 16 4.6 BP人工神经网络模型的改进 4. 引入放大因子 5. 用蚁群优化算法选择最优初始权值 蚁群优化算法是一......自学习模型为 △Wij(n1) h ФiOja△Wij(…

世界互联网大会上发布的《中国互联网发展报告2020》显示——中国人工智能专利申请数跃居世界第一...

文章来源:文汇报,图文如有侵权,请联系小编删除世界互联网大会会址乌镇互联网国际会展中心外景。新华社记者 黄宗治摄文汇报乌镇11月23日专电(特派记者徐晶卉)过去一年,5G、操作系统等技术取得突破&#xff…