从源码的角度看 React JS 中批量更新 State 的策略(下)
2024-08-21 19:12:21
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。
前置文章列表
1. batchingStrategy 策略
现在我们开始来看 batchingStrategy 的策略定义。
目前 React 中 batchingStrategy 的定义为 ReactDefaultBatchingStrategy
。
ReactDefaultBatchingStrategy 包含两部分。
- 最重要的部分 FLUSH_BATCHED_UPDATES。
实现在这里。
注意实现里定义了一个叫 pooled
的东西,后续我们会展开讨论这样设计的原理与好处。
React 将所有的组件丢到 pool 中去,然后都交给 runBatchedUpdates
去执行更新操作了。
同样,还有一个 asap
的概念,也在后续文章中讨论。
对所有的组件进行 performUpdateIfNecessary
的判断,并更新组件。
- 另一个实现为 RESET_BATCHED_UPDATES,用于将
isBatchingUpdates
重置为false
,等待下次组件的批量更新。
2. 组件是否需要更新的比较 performUpdateIfNeeded
两个逻辑,比较组件是否需要更新,以及第二种条件下直接进行强制更新。
ReactReconciler.receiveComponent
在元素级别进行了比较,不过不一样那么就调用 receiveComponent
。
其他状态直接调用 updateComponent
。
注意这里的 updateComponent
函数的内部实现是递归的,这样的设计便于及时获取到哪些组件是已更新的状态,便于前台进行获取使用。
到这里我们就把整个 React 的更新逻辑策略的部分走完了,接下来我们会继续看一下 React 如何进行页面UI 的更新以及一些遗留的小知识点。
最新文章
- Web环境使用相对路径发布Webservice
- BW CUBE 数据的聚集和压缩
- Java实现Socket之WhoisClient
- codevs 1709 钉子和小球
- android4.0下如何判断手机是否有底部物理按键(menu物理按键)
- eclipse中的Java项目导出成为一个可以直接双击运行的jar文件
- 面向对象的WebAPI框架XXL-HEX
- React笔记:React基础(2)
- C++ STL next_permutation(快速排列组合)
- JavaScript初学者必看“this”
- Trickbot展示新技巧:密码抓取器模块
- 自学Linux Shell3.6-文件查看命令file cat more less tail head
- intent.setFlags方法中的参数值含义
- debian下配置nginx缓存
- Red Hat7.2 上安装 MySQL5.5.58
- c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码,java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法(ajax调用) Linq To Json SqlServer 递归查询
- java动态加载jar包,并运行其中的类和方法
- 【转】IOS 学习之 NSPredicate 模糊、精确、查询
- Microsoft Dynamics CRM 2011 批量添加域用户 然后添加CRM用户
- php7 改为从栈上分配内在的思路
热门文章
- (转载)Oracle 树操作(select…start with…connect by…prior)
- python第九十五天--js正则
- 安装office2010提示要安装MSXML6.10.1129.0解决方法
- Python基础知识:类
- 使用python3.6和django1.9的xadmin 遇到坑,__unicode__()和__str__()
- 基于C#的单元测试(VS2015)
- Beta冲刺(3/5)(麻瓜制造者)
- 反转链表的golang实现
- 2018年值得关注的10大JavaScript动画库
- postgresql中uuid的使用