从源码的角度再看 React JS 中的 setState
在这一篇文章中,我们从源码的角度再次理解下 setState 的更新机制,供深入研究学习之用。
在上一篇手记「深入理解 React JS 中的 setState」中,我们简单地理解了 React 中 setState “诡异”表现的原因。
源码的部分为了保证格式显示正常就截图了,查看源码点击对应的链接直接跳转至 GitHub 查看即可。
1. React 中的 setState 更新逻辑代码
在更新逻辑的部分,可以看到 React 会通过 batchingStrategy.isBatchingUpdates
判断当前的逻辑状态下是否需要进行批量更新。
如果不是,那么就直接进行页面的批量更新,将之前累积的所有状态一次更新到组件上。就是类似我们上一篇文章中举例的快递点一次将所有的快递寄出。
如果是,那么所有的组件状态不进行立即更新,而是将组件状态存放在一个叫
dirtyComponents
的数组中去,等待下次更新时机的到来再进行更新。
2. React 中的 Transaction 设计
为了实现上述的更新逻辑,React 设计了 Transaction 的逻辑,看起来也像是数据库中的事务。
源码中如图所示,给出了一幅图以及大段的解释。
React 将整个的函数执行过程包裹上了 Transaction,在函数执行前与执行后分别有 initialize
和 close
两个方法。
这样的话 React 就有时机在函数执行过程中,涉及到 setState 的执行,都将缓存下来,在 close
的时候进入到 React 的 state 更新逻辑进行更新判断操作,并最终更新到前台的 DOM 上。
其实 Virtual DOM 的框架都会有这样的设计逻辑,理解了这样的底层设计才能很好地理解一些方法在前台的表现行为。
Vue.js 中也有类似的设计逻辑,后续如果有时间我们将继续进行相关讨论。
下一篇文章,我们继续来看 React 底层是如何进行 batchingStrategy
的设计以及更新状态的转换的。
从源码的角度再看 React JS 中的 setState的更多相关文章
- 从源码的角度看 React JS 中批量更新 State 的策略(下)
这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...
- 从源码的角度看 React JS 中批量更新 State 的策略(上)
在之前的文章「深入理解 React JS 中的 setState」与 「从源码的角度再看 React JS 中的 setState」 中,我们分别看到了 React JS 中 setState 的异步 ...
- 从源码的角度再学「Thread」
前言 Java中的线程是使用Thread类实现的,Thread在初学Java的时候就学过了,也在实践中用过,不过一直没从源码的角度去看过它的实现,今天从源码的角度出发,再次学习Java Thread, ...
- 深入理解 React JS 中的 setState
此文主要探讨了 React JS 中的 setState 背后的机制,供深入学习 React 研究之用. 在课程 React.js入门基础与案例开发 中,有些同学会发现 React JS 中的 set ...
- 从Vue.js源码角度再看数据绑定
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/an ...
- 从源码的角度看Activity是如何启动的
欢迎访问我的个人博客,原文链接:http://wensibo.top/2017/07/03/Binder/ ,未经允许不得转载! 大家好,今天想与大家一起分享的是Activity.我们平时接触的最多的 ...
- 不能再被问住了!ReentrantLock 源码、画图一起看一看!
前言 在阅读完 JUC 包下的 AQS 源码之后,其中有很多疑问,最大的疑问就是 state 究竟是什么含义?并且 AQS 主要定义了队列的出入,但是获取资源.释放资源都是交给子类实现的,那子类是怎么 ...
- 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事件分 ...
随机推荐
- K邻近分类算法
# -*- coding: utf-8 -*- """ Created on Thu Jun 28 17:16:19 2018 @author: zhen "& ...
- tkinter中combobox下拉选择控件(九)
combobox控件,下拉菜单控件 combobox控件在tkinter中的ttk下 简单的实现下: import tkinter from tkinter import ttk # 导入ttk模块, ...
- Linux系统根据端口号来查看其进程并杀死进程
1.首先是查看某个端口号,(以httpd服务为例) 2.查看此端口下进程以及进程号 3.我们使用awk命令过滤出第二列,即进程号 4.杀死进程 报错的这一行表示,要杀死的进程PID为3754,但是没有 ...
- 8.1Python面向对象编程(一)
目录 目录 前言 (一)基本概念 ==1.面向过程与面向对象== ==2.类与对象== (二)类属性的相关操作 ==1.定义一个经典类== ==2.对象属性的操作== ==3.类属性的操作== ==4 ...
- Team Dipper
Team Dipper Dipper 来自追梦的7星,We Are From Now On! 说什么?图小了?没问题满足你! No.1 沉默深邃之境的术士,源自奥术之境的PHP探寻者 03150225 ...
- Java基本数据类型转换
一:Java的基本数据类型和引用数据类型 1:基本数据类型 2:引用数据类型 二:基本数据的类型转换 基本数据类型中,布尔类型boolean占有一个字节,由于其本身所代码的特殊含义,boolean类型 ...
- 通过SQL直接插入、修改ArcGIS SDE空间表中的数据
基于Arcgis Server 10.1 +Oracle 11g环境测试 ArcGIS SDE ? 1 2 INSERT INTO CAMERA_INFO(OBJECTID,ID,SHAPE) ...
- Django admin 后台管理
在App 文件夹下的 admin.py 文件中写入 from django.contrib import admin from app名 import models admin.site.site_h ...
- c++11の的左值、右值以及move,foward
左值和右值的定义 在C++中,可以放到赋值操作符=左边的是左值,可以放到赋值操作符右边的是右值.有些变量既可以当左值又可以当右值.进一步来讲,左值为Lvalue,其实L代表Location,表示在内存 ...
- numpy的random模块
随机抽样 (numpy.random) 简单的随机数据 rand(d0, d1, ..., dn) 随机值 >>> np.random.rand(3,2) array([[ 0.14 ...