从源码的角度再看 React JS 中的 setState
在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState “诡异”表现的原因。
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用。
源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可。
1. React 中的 setState 更新逻辑代码
在更新逻辑的部分,可以看到 React 会通过 判断当前的逻辑状态下是否需要进行批量更新。
如果不是,那么就直接进行页面的批量更新,将之前累积的所有状态一次更新到组件上。就是类似我们上一篇文章中举例的快递点一次将所有的快递寄出。
如果是,那么所有的组件状态不进行立即更新,而是将组件状态存放在一个叫的数组中去,等待下次更新时机的到来再进行更新。
源码地址:
https://github.com/facebook/react/blob/35962a00084382b49d1f9e3bd36612925f360e5b/src/renderers/shared/reconciler/ReactUpdates.js#L199
2. React 中的 Transaction 设计
为了实现上述的更新逻辑,React 设计了 Transaction 的逻辑,看起来也像是数据库中的事务。
源码中如图所示,给出了一幅图以及大段的解释。
React 将整个的函数执行过程包裹上了 Transaction,在函数执行前与执行后分别有 和 两个方法。
这样的话 React 就有时机在函数执行过程中,涉及到 setState 的执行,都将缓存下来,在 的时候进入到 React 的 state 更新逻辑进行更新判断操作,并最终更新到前台的 DOM 上。
源码地址:
https://github.com/facebook/react/blob/6d5fe44c8602f666a043a4117ccc3bdb29b86e78/src/shared/utils/Transaction.js#L28
其实 Virtual DOM 的框架都会有这样的设计逻辑,理解了这样的底层设计才能很好地理解一些方法在前台的表现行为。
Vue.js 中也有类似的设计逻辑,后续如果有时间我们将继续进行相关讨论。
下一篇文章,我们继续来看 React 底层是如何进行 的设计以及更新状态的转换的。
加入 DevOpenClub Pro 知识星球
DevOpen.Club Pro 原创视频社区小程序
- 【防护】如何阻止SELECT * 语句
- COGS 862. 二进制数01串【dp+经典二分+字符串】
- 【AlphaGo Zero 核心技术-深度强化学习教程代码实战03】编写通用的格子世界环境类
- 冒泡排序简单操作模版及实例分析
- COGS 1299. bplusa【听说比a+b还要水的大水题???】
- python学习笔记之运算符
- 锐捷网络NBR部分路由器cookie欺骗权限绕过
- 手写快排模版
- COGS 68. [NOIP2005] 采药【01背包复习】
- UESTC 30 &&HDU 2544最短路【Floyd求解裸题】
- 我的第一个网页制作:Hello World!
- UESTC 1584 Washi与Sonochi的约定【树状数组裸题+排序】
- Hyperledger - 超级账本项目:简介,安装,案例
- 我的第三个网页制作:b、i、s、u、sub、sup标签的使用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【设计模式】689- TypeScript 设计模式之观察者模式
- Found a swap file by the name ".jsidInspector.py.swp"
- CentOs7下部署tomcat文件服务器
- 【拓展】未来的JavaScript记录与元组
- 【Vuejs】690- Vue新特性:CSS 中使用 JS 变量
- Zabbix监控之从Kafka中获取消费进度和lag
- 将UTC(字符串包含TZ的时间)时间转换成本地时间 python
- centos7安装telnet服务
- linux vim编辑器之环境设置
- JAVA实现UTC时间转换成北京时间
- JDK8 LocalDateTime转换成时间戳
- Grafana创建zabbix自定义template(模板)
- 一条SQL引发的“血案”:
- Grafana安装配置Elasticsearch插件
- Elasticsearch升级踩坑记之使用snapshot备份数据