从源码的角度再看 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的转变。在这期间,通信的关键技术在发生变化,处理的信息量成倍增长。而天线,是实现这一跨越式提升不可或缺的组件。按照业界的定义,天线是一种变…

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

来源:科技日报记者:聂翠蓉平行进化观点认为,具有共同祖先的有机体即使彼此被分隔在相距千里的不同地域,也会以同样的方式进化。据物理学家组织网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…

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

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

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 太大或太小_怎样将视频文件变小却对画质没有太大影响呢?

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

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

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

hessian学习笔记

一、hessian是什么 Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能。 相比WebService,Hessian更简单、快捷。采用的是二进制RPC协议,因为采用的是二进制协议,所以它很适合于发送二进制数据。——百度百…

谷歌浏览器手势_分享一些日常手势[狗头]

本文字数:2222字阅读时间:6分钟2020年05月19日星期二晴快分享一些工作中经常用到的快捷键,能帮助你提升工作效率,还能装13,下班时可以自豪地说一句:底薪到手,关机下班୧(๑•̀◡•́๑)૭Ctrl快…

北斗核心器件100%国产化,已接入大部分智能手机

来源:AI前线整理 | 冬梅、钰莹终于,中国在又一个领域达到核心器件 100% 纯国产。北斗核心器件国产化率 100%,22nm 芯片进入量产近日,在 2020 世界 5G 大会主论坛上,北斗卫星导航系统工程总设计师杨长风在会上分享了题为…

tensorrt轻松部署高性能dnn推理_NVIDIA TensorRT高性能深度学习推理

NVIDIA TensorRT高性能深度学习推理NVIDIA TensorRT™ 是用于高性能深度学习推理的 SDK。此 SDK 包含深度学习推理优化器和运行时环境,可为深度学习推理应用提供低延迟和高吞吐量。在推理过程中,基于 TensorRT 的应用程序的执行速度可比 CPU 平台的速度快…

Neuron最新研究:神经科学家测量球迷大脑对比赛的反应,试图挖掘人类的深层天性...

来源:brainnews2020年的1月27日早上,科比去世,父亲想办法安慰睡醒后的儿子;而在2020年11月26日早上,马拉多纳去世,儿子想办法安慰睡醒后的父亲。2020年,带走了全球无数球迷的青春。那么&#xf…

关于表情符号与UTF-8的探讨

4-23 现在无论原生还是网页端,表情符号绝大部分都可以正常显示,但是也有一部分是不能正常显示的。但存入到mysql的时候,不能够正常显示的表情符号,就会让mysql(utf-8)拜拜了。这个不仅仅是显示问题,很重要的一点是&…