从源码的角度看 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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
3天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
53 33
|
24天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
101 24
|
1月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
91 2
|
2月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
58 11
|
2月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
34 1
|
2月前
|
前端开发 JavaScript 算法
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
30 0
|
2月前
|
前端开发 JavaScript API
探索现代前端框架——React 的性能优化策略
探索现代前端框架——React 的性能优化策略
37 0
|
2月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
27 0
|
2月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
48 0
|
2月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
99 9