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

简介: 在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步表现,并从源码的角度简单地了解了 React 中 setState 的设计结构以及原理。

截图

在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步表现,并从源码的角度简单地了解了 React 中 setState 的设计结构以及原理。

这篇文章继上篇文章后,继续从源码的角度来了解 React 中对 State 批量更新策略的定义。

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

1. setState 的源码实现

在 setState 的源码实现中,传递过来的参数就被定义成了 partialState,从参数名以及参数的说明中就可以看到,这只是 state 的一部分。
默认都会调用 this.updater.enqueueSetState(this, partialState) 将 state 放进更新队列中去。
而如果有传递回调函数过来的话,会执行 this.updater.enqueueCallback(this, callback),涉及到回调函数的部分,我们后续文章会继续进行分析。

截图

源码地址

2. 更新队列 ReactUpdateQueue 的定义

在上面的 setState 定义中,我们可以看到有一个 updater 的调用。
具体的定义如下。

截图

源码地址

而初始的 updater 的定义如下。

截图

源码地址

这样最终的更新队列都指向了 ReactUpdateQueue 的源码定义中。

3. ReactUpdateQueue 中的 enqueueSetState

我们可以看到 ReactUpdateQueue 中的 enqueueSetState 的定义。

截图

源码地址

继续去跟 enqueueUpdate(internalInstance) 的实现。

截图

源码地址

4. ReactUpdates 中的 enqueueUpdate

到这里,我们回到了上篇文章看到 ReactUpdates 的位置。

截图

源码地址

我们继续看函数开始的部分,注入的两个部分。

截图

源码地址

注入了两个部分,ReactReconcileTransaction 以及 batchingStrategy

ReactReconcileTransaction 主要用于在更新 state 时,页面 UI 元素的修正以及在执行生命周期函数时,处理好生命周期函数与其他用户自定义函数之间的执行顺序与逻辑,具体的实现可以参考它的源码。

ReactReconcileTransaction 源码地址

到这里,我们从 setState 的定义开始,梳理好了在进行更新策略前的逻辑部分,下篇文章,我们将直达 batchingStrategy 的内部实现,看看 React 的更新逻辑策略的实现。


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

相关文章
|
20天前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠,玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
38 1
|
11天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
54 1
|
17天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
24 3
|
19天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
32 4
|
19天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
18天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
45 0
html5+three.js公路开车小游戏源码
|
18天前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
29 0
JS趣味打字金鱼小游戏特效源码
|
JavaScript 前端开发 算法
javascript 策略设计模式
什么是策略。 策略就是根据形势的发展而制定的行动方针。 比如说春节快要到了,我们要回家,回家我们就要选择交通工具。怎么回家我们就需要制定方案。比如说我吧,我们家在河南一个农村,不管是汽车,火车,飞机都没有直达的。
945 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
97 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
130 4
下一篇
无影云桌面