从源码的角度看 React JS 中批量更新 State 的策略(下)

简介: 这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用。前置文章列表深入理解 React JS 中的 setState从源码的角度再看 React JS 中的 setState从源码的角度看 React JS 中批量更新 State 的策略(上)1. batchingStrategy 策略现在我们开始来看 batchingStrategy 的策略定义。

截图

这篇文章我们继续从源码的角度学习 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 的更新以及一些遗留的小知识点。


作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
15天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
17 0
|
1月前
|
JavaScript
当当网上书店购物车——JS源码
当当网上书店购物车——JS源码
14 0
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
2月前
|
JavaScript 前端开发 开发者
像素鸟html与js源码(4节课勉强做完)
像素鸟html与js源码(4节课勉强做完)
25 0
|
9天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
1月前
|
JavaScript 前端开发
购物车的功能——JS源码
购物车的功能——JS源码
14 2
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
react+typescript给state和props定义指定类型
react+typescript给state和props定义指定类型
16 1
|
算法 JavaScript 前端开发
|
3月前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
92 0