从源码的角度看 React JS 中批量更新 State 的策略(下)
这篇文章我们继续从源码的角度学习 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 的更新以及一些遗留的小知识点。
从源码的角度看 React JS 中批量更新 State 的策略(下)的更多相关文章
- 从源码的角度看 React JS 中批量更新 State 的策略(上)
在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...
- 从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用. 在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 ...
- 从源码的角度看Activity是如何启动的
欢迎访问我的个人博客,原文链接:http://wensibo.top/2017/07/03/Binder/ ,未经允许不得转载! 大家好,今天想与大家一起分享的是Activity.我们平时接触的最多的 ...
- 从源码的角度看Service是如何启动的
欢迎访问我的个人博客 ,原文链接:http://wensibo.top/2017/07/16/service/ ,未经允许不得转载! 七月中旬了,大家的实习有着落了吗?秋招又准备的怎么样了呢?我依旧在 ...
- 从源码的角度分析ViewGruop的事件分发
从源码的角度分析ViewGruop的事件分发. 首先我们来探讨一下,什么是ViewGroup?它和普通的View有什么区别? 顾名思义,ViewGroup就是一组View的集合,它包含很多的子View ...
- 【转】Android事件分发机制完全解析,带你从源码的角度彻底理解(下)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153761 记得在前面的文章中,我带大家一起从源码的角度分析了Android中Vi ...
- 第九节:从源码的角度分析MVC中的一些特性及其用法
一. 前世今生 乍眼一看,该标题写的有点煽情,最近也是在不断反思,怎么能把博客写好,让人能读下去,通俗易懂,深入浅出. 接下来几个章节都是围绕框架本身提供特性展开,有MVC程序集提供的,也有其它程序集 ...
- Android AsyncTask完全解析,带你从源码的角度彻底理解
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/11711405 我们都知道,Android UI是线程不安全的,如果想要在子线程里进 ...
- [转]Android事件分发机制完全解析,带你从源码的角度彻底理解(上)
Android事件分发机制 该篇文章出处:http://blog.csdn.net/guolin_blog/article/details/9097463 其实我一直准备写一篇关于Android事件分 ...
随机推荐
- [20170617]vim中调用sqlplus.txt
[20170617]vim中调用sqlplus.txt --//以前写过一篇emacs下调用sqlplus的文章,一直想学emacs,受限制自己掌握vim,对学习它没有兴趣,原链接如下:--//htt ...
- oracle 数据库 导出与导入 expdb和impdb使用方法 (服务器本机)
expdb 与exp 导出数据有区异,exp 无法导出空值表,用于客户端,expdb 只用于服务器端.备份出来的数据可再远程传输到另外一台linux 实现异地备份! 一 关于expdp和impdp ...
- 【PAT】B1042 字符统计(20 分)
/* 15分的题很简单,但是自己写的时候在输入数据时没有考虑好下标 另外有忘记了输入字符时考虑是否有\n */ #include<stdio.h> #include<algorith ...
- SAP ABAP 查找用户出口
1.查找事物代码程序名 2.查找用户出口 T-CODE:SE80 在子例程中查找以USEREXIT开头的子程序.
- 第 16 章 C 预处理器和 C 库(直角坐标转换极坐标)
/*------------------------------------- rect_pol.c -- 把直角坐标转换为极坐标 ---------------------------------- ...
- cesium相机绕点飞行
相机绕点飞行原理就是获取相机参数与点位置信息,添加时间监听,一直去改变相机的heading,关键代码如下: function rotateHeading() { // 相机的当前heading var ...
- WINDOWS 下设置单独的java环境
set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_65set PATH=%JAVA_HOME%\bin;%PATH%;D:cd D:\JavaProjectcm ...
- javascript中的for in循环和for in循环的使用陷阱
javascript中的for循环和for...in循环还是有些区别的,比如定义一个数组,然后用for..in循环输出 var array=[1,2,3,4,5,6]; for(var s in ar ...
- vue指令相关的
阅读目录 1.v-text 2.v-html 3.v-show 4.v-if 5.v-if vs v-show 6.v-else 7.v-for 8.v-on 9.v-bind 和 v-model 1 ...
- WEB安全 - 认识与防御XSS攻击
目录 什么是xss攻击? XSS的危害 XSS攻击分类 xss攻击示例 反射型攻击 - 前端URL参数解析 反射型攻击 - 后端URL参数解析 注入型攻击 - 留言评论 如何规避xss攻击? 总结 什 ...