react源码解析3.react源码架构

news2024/12/24 20:33:45

这一章的目的是让我们认识一下react源码架构和各个模块。

在真正的代码学习之前,我们需要在大脑中有一个react源码的地图,知道react渲染的大致流程和框架,这样才能从上帝视角看react是怎么更新的,来吧少年。

react的核心可以用ui=fn(state)来表示,更详细可以用

const state = reconcile(update);
const UI = commit(state);

上面的fn可以分为如下一个部分:

  • Scheduler(调度器): 排序优先级,让优先级高的任务先进行reconcile
  • Reconciler(协调器): 找出哪些节点发生了改变,并打上不同的Flags(旧版本react叫Tag)
  • Renderer(渲染器): 将Reconciler中打好标签的节点渲染到视图上

一图胜千言:

react源码3.1

react源码3.2

jsx

jsx是js语言的扩展,react通过babel词法解析(具体怎么转换可以查阅babel相关插件),将jsx转换成React.createElement,React.createElement方法返回virtual-dom对象(内存中用来描述dom阶段的对象),所有jsx本质上就是React.createElement的语法糖,它能声明式的编写我们想要组件呈现出什么样的ui效果。在第5章jsx我们会详细介绍jsx解析之后的结果。

Fiber双缓存

Fiber对象上面保存了包括这个节点的属性、类型、dom等,Fiber通过child、sibling、return(指向父节点)来形成Fiber树,还保存了更新状态时用于计算state的updateQueue,updateQueue是一种链表结构,上面可能存在多个未计算的update,update也是一种数据结构,上面包含了更新的数据、优先级等,除了这些之外,上面还有和副作用有关的信息。

双缓存是指存在两颗Fiber树,current Fiber树描述了当前呈现的dom树,workInProgress Fiber是正在更新的Fiber树,这两颗Fiber树都是在内存中运行的,在workInProgress Fiber构建完成之后会将它作为current Fiber应用到dom上

在mount时(首次渲染),会根据jsx对象(Class Component或的render函数者Function Component的返回值),构建Fiber对象,形成Fiber树,然后这颗Fiber树会作为current Fiber应用到真实dom上,在update(状态更新时如setState)的时候,会根据状态变更后的jsx对象和current Fiber做对比形成新的workInProgress Fiber,然后workInProgress Fiber切换成current Fiber应用到真实dom就达到了更新的目的,而这一切都是在内存中发生的,从而减少了对dom好性能的操作。

​ 例如下面代码的Fiber双缓存结构如下,在第7章会详细讲解

function App() {
  const [count, setCount] = useState(0);
  return (
       <>
      <h1
            onClick={() => {
          // debugger;
          setCount(() => count + 1);
        }}
        >
                     <p title={count}>{count}</p> xiaochen
      </h1>
    </>
  )
}

ReactDOM.render(<App />, document.getElementById("root"));

react源码7.3

scheduler

Scheduler的作用是调度任务,react15没有Scheduler这部分,所以所有任务没有优先级,也不能中断,只能同步执行。

我们知道了要实现异步可中断的更新,需要浏览器指定一个时间,如果没有时间剩余了就需要暂停任务,requestIdleCallback貌似是个不错的选择,但是它存在兼容和触发不稳定的原因,react17中采用MessageChannel来实现。

//ReactFiberWorkLoop.old.js
function workLoopConcurrent() {
  while (workInProgress !== null && !shouldYield()) {//shouldYield判断是否暂停任务
    workInProgress = performUnitOfWork(workInProgress); 
  }
}

在Scheduler中的每的每个任务的优先级使用过期时间表示的,如果一个任务的过期时间离现在很近,说明它马上就要过期了,优先级很高,如果过期时间很长,那它的优先级就低,没有过期的任务存放在timerQueue中,过期的任务存放在taskQueue中,timerQueue和timerQueue都是小顶堆,所以peek取出来的都是离现在时间最近也就是优先级最高的那个任务,然后优先执行它。

react源码15.2

Lane模型

react之前的版本用expirationTime属性代表优先级,该优先级和IO不能很好的搭配工作(io的优先级高于cpu的优先级),现在有了更加细粒度的优先级表示方法Lane,Lane用二进制位表示优先级,二进制中的1表示位置,同一个二进制数可以有多个相同优先级的位,这就可以表示‘批’的概念,而且二进制方便计算。

这好比赛车比赛,在比赛开始的时候会分配一个赛道,比赛开始之后大家都会抢内圈的赛道(react中就是抢优先级高的Lane),比赛的尾声,最后一名赛车如果落后了很多,它也会跑到内圈的赛道,最后到达目的地(对应react中就是饥饿问题,低优先级的任务如果被高优先级的任务一直打断,到了它的过期时间,它也会变成高优先级)

Lane的二进制位如下,1的bits越多,优先级越低

相关参考视频讲解:进入学习

//ReactFiberLane.js
export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;

export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;

export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000;

const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000;

export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000;

const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;

const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;

export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000;

export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;

const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;

export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000;

export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;

reconciler (render phase)

Reconciler发生在render阶段,render阶段会分别为节点执行beginWork和completeWork(后面会讲),或者计算state,对比节点的差异,为节点赋值相应的effectFlags(对应dom节点的增删改)

协调器是在render阶段工作的,简单一句话概括就是Reconciler会创建或者更新Fiber节点。在mount的时候会根据jsx生成Fiber对象,在update的时候会根据最新的state形成的jsx对象和current Fiber树对比构建workInProgress Fiber树,这个对比的过程就是diff算法。

diff算法发生在render阶段的reconcileChildFibers函数中,diff算法分为单节点的diff和多节点的diff(例如一个节点中包含多个子节点就属于多节点的diff),单节点会根据节点的key和type,props等来判断节点是复用还是直接新创建节点,多节点diff会涉及节点的增删和节点位置的变化,详细见第9章。

reconcile时会在这些Fiber上打上Flags标签,在commit阶段把这些标签应用到真实dom上,这些标签代表节点的增删改,如

//ReactFiberFlags.js
export const Placement = /*             */ 0b0000000000010;
export const Update = /*                */ 0b0000000000100;
export const PlacementAndUpdate = /*    */ 0b0000000000110;
export const Deletion = /*              */ 0b0000000001000;

render阶段遍历Fiber树类似dfs的过程,‘捕获’阶段发生在beginWork函数中,该函数做的主要工作是创建Fiber节点,计算state和diff算法,‘冒泡’阶段发生在completeWork中,该函数主要是做一些收尾工作,例如处理节点的props、和形成一条effectList的链表,该链表是被标记了更新的节点形成的链表

深度优先遍历过程如下,图中的数字是顺序,return指向父节点,第9章详细讲解

function App() {
  return (
       <>
      <h1>
        <p>count</p> xiaochen
      </h1>
    </>
  )
}

react源码7.2

看如下代码

function App() {
  const [count, setCount] = useState(0);
  return (
        <>
      <h1
        onClick={() => {
          setCount(() => count + 1);
        }}
      >
        <p title={count}>{count}</p> xiaochen
      </h1>
    </>
  )
}

如果p和h1节点更新了则effectList如下,从rootFiber->h1->p,,顺便说下fiberRoot是整个项目的根节点,只存在一个,rootFiber是应用的根节点,可能存在多个,例如多个ReactDOM.render(<App />, document.getElementById("root"));创建多个应用节点

react源码8.3

renderer(commit phase)

Renderer发生在commit阶段,commit阶段遍历effectList执行对应的dom操作或部分生命周期。

Renderer是在commit阶段工作的,commit阶段会遍历render阶段形成的effectList,并执行真实dom节点的操作和一些生命周期,不同平台对应的Renderer不同,例如浏览器对应的就是react-dom。

commit阶段发生在commitRoot函数中,该函数主要遍历effectList,分别用三个函数来处理effectList上的节点,这三个函数是commitBeforeMutationEffects、commitMutationEffects、commitLayoutEffects,他们主要做的事情如下,后面会详细讲解,现在在大脑里有一个结构就行

react源码10.1

concurrent

它是一类功能的合集(如fiber、schduler、lane、suspense),其目的是为了提高应用的响应速度,使应用cpu密集型的更新不在那么卡顿,其核心是实现了一套异步可中断、带优先级的更新。

我们知道一般浏览器的fps是60Hz,也就是每16.6ms会刷新一次,而js执行线程和GUI也就是浏览器的绘制是互斥的,因为js可以操作dom,影响最后呈现的结果,所以如果js执行的时间过长,会导致浏览器没时间绘制dom,造成卡顿。react17会在每一帧分配一个时间(时间片)给js执行,如果在这个时间内js还没执行完,那就要暂停它的执行,等下一帧继续执行,把执行权交回给浏览器去绘制。

react源码15.3

对比下开启和未开启concurrent mode的区别,开启之后,构建Fiber的任务的执行不会一直处于阻塞状态,而是分成了一个个的task

未开启concurrent

react源码1.2

开启concurrent

react源码3.3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/154837.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

头条权重如何在线查询,头条权重为0怎么办

每个用心用自媒体的创作者们&#xff0c;都听说过权重一说&#xff0c;权重高&#xff0c;也就意味着你的这个账号属于优质账号&#xff0c;推荐量会相应增加&#xff0c;还有一些自媒体会有创作者账号的白名单&#xff0c;优质账号会放在白名单里。 头条权重如何在线查询&…

适用于校园学生公寓的联网智能门锁

常言道&#xff1a;365行&#xff0c;行行出状元。每一个行业都有其特色&#xff0c;每一个行业都离不开一个共同的话题——安全。以联网智能门锁为例&#xff0c;早期的普通智能门锁主要应用于家庭、酒店等场景&#xff0c;能够满足几口之间、小规模流动人员场景使用需求。随着…

yolov8训练自己的数据集

太卷了&#xff01;&#xff01;&#xff01;&#xff01; 太卷了&#xff01;&#xff01;&#xff01;&#xff01;太卷了&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;太卷了&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;太卷了&#xff…

【Nginx】Nginx简介

1. 什么是nginx2. 正向代理与反向代理 2.1 概念2.2 区别 正向代理:客户端 <一> 代理 一>服务端反向代理:客户端 一>代理 <一> 服务端 3. 负载均衡4. 动静分离 1. 什么是nginx Nginx (“engine x”) 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少…

2022年度【产业数字化金铲奖】重磅来袭!

出品|产业家 第二届金铲奖来了&#xff01; 过去的一年时间里&#xff0c;产业家清晰地看到&#xff0c;数实融合的潮水更加汹涌澎湃且势不可挡&#xff0c;越来越多的企业开始寻求数字化转型&#xff0c;它们来自金融、工业、农业、医疗、能源等等。 产业数字化&#xff0…

ARM汇编 : 汇编指令,伪指令,汇编程序格式

ARM汇编指令ARM指令集特点ARM工作模式ARM寄存器ARM32ARM64ARM64汇编指令内存存储访问指令LDR /STR 指令LDP/STP指令&#xff08;LDR 的变种指令&#xff0c;能够同时操做两个寄存器&#xff09;LDRB /SDRB 指令(只操作一个字节)LDRH /STRH 指令(只操作两个字节)LDUR/STUR指令 (…

Flink之转换算子和一些计算案例(Transformation)

Flink之转换算子 &#xff08;Transformation&#xff09; [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lcaNaXGY645b2f5adabd496ebbee9edfedad6437.png)null)] 数据源读入数据之后&#xff0c;我们就可以使用各种转换算子&#xff0c;将一个或多…

雷达算法 | 一种适用于汽车雷达的聚类算法研究与分析

本文参考TI的一种适用于汽车雷达的聚类算法研究和实现.pdf文档&#xff0c;原文链接如下&#xff1a;https://www.ti.com.cn/cn/lit/an/zhca739/zhca739.pdfts1672973254109&ref_urlhttps%253A%252F%252Fwww.google.com.hk%252F。 由于不涉及硬件&#xff0c;因此本文仅对…

C生万物 | 反汇编深挖【函数栈帧】的创建和销毁

&#x1f451;作者主页&#xff1a;Fire_Cloud_1 &#x1f3e0;学习社区&#xff1a;烈火神盾 &#x1f517;专栏链接&#xff1a;万物之源——C 一文彻底搞懂函数栈帧创建和销毁的过程一、 什么是函数栈帧二、 理解函数栈帧能解决什么问题呢&#xff1f;三、 函数栈帧的创建和…

易基因|糖尿病大血管和微血管病变的表观遗传学调控机制(DNA甲基化+组蛋白修饰):综述

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。2022年12月09日&#xff0c;《Frontiers in Endocrinology》杂志发表了题为“Epigenetic basis of diabetic vasculopathy”的综述文章&#xff0c;综述了表观遗传学修饰如DNA甲基化和组蛋…

电脑开机出现英文字母开不了机?小白操作技巧

在使用电脑的过程中&#xff0c;有时我们会遇到这种情况&#xff0c;就是电脑开机出现英文字母开不了机&#xff0c;而且还伴随着黑屏背景出现。出现这种问题&#xff0c;你们知道这是什么原因吗&#xff1f;以及我们该如何解决&#xff1f;下面这篇文章就可以告诉你&#xff0…

Foundry 中文文档发布啦

Foundry是一个Solidity智能合约开发工具链。Foundry管理您的依赖关系、编译项目、运行测试、部署&#xff0c;并允许您通过命令行和Solidity 脚本与链交互。 Foundry 中文文档是基于官方 Foundry book 的翻译&#xff0c;全面介绍 Foundry 所有功能。 使用Foundry的好处 Fou…

lvs负载均衡、nginx基本内容复习

文章目录前言一、LVSkeepalived实现高可用负载均衡二、三种不同模式实现负载均衡的区别与优缺点NAT模式DR直连路由模式TUN隧道模式三、Nginx之编译、负载均衡实现rr算法实现负载均衡ip_hash算法四、nginx平滑升级前言 一、LVSkeepalived实现高可用负载均衡 C/S架构和B/S架构&…

UWB室内定位系统的优势与好处

UWB定位系统的优势整理1、精度高&#xff1a;在室内定位领域&#xff0c;能够做到厘米级高精度定位的技术非UWB定位莫属。UWB采用TDOA&#xff08;到达时间&#xff09;算法&#xff0c;测量电磁波从发射端到达接收端所用的时间&#xff0c;分布在房间内的几个接收端同时接收到…

nginx小结二:高可用

nginx小结二&#xff1a;高可用nginx作为负载均衡器&#xff0c;所有请求都到了nginx&#xff0c;可见nginx处于非常重点的位置&#xff0c;如果nginx服务器宕机后端web服务将无法提供服务&#xff0c;影响严重。有鉴于此需要建立一个备份机&#xff0c;主服务器和备份机通过定…

用迭代局部搜索求解TSP问题(python)

文章目录1.迭代局部搜索(ILS)2.用ILS解决TSP问题2.1 函数模块2.2 主函数2.3 berlin52数据集测试1.迭代局部搜索(ILS) 关于迭代局部搜索(ILS iterated local search)的框架和应用总结可以阅读文献Iterated Local Search: Framework and Applications ILS的核心思想&#xff1a;…

【Kubernetes 企业项目实战】02、基于 Prometheus 和 K8s 构建智能化监控告警系统(下)

目录 一、可视化 UI 界面 Grafana 的安装和配置 1.1 Grafana 介绍 1.2 安装 Grafana 1.3 Grafana 界面接入 Prometheus数据源 1&#xff09;登录 grafana 2&#xff09;配置 grafana 界面 3&#xff09;导入的监控模板 二、kube-state-metrics 组件 2.1 kube-state-m…

JS的基础语法

作者&#xff1a;~小明学编程 文章专栏&#xff1a;JavaEE 格言&#xff1a;热爱编程的&#xff0c;终将被编程所厚爱。 目录 JavaScript的书写形式 行内式 内嵌式 外部式 注释 输入输出 输入 输出 JS的语法规则 变量 数据类型 数字类型 字符串类型 布尔类型 运算…

YED-M724嵌入式4G Cat1 核心板介绍

YED-M724嵌入式4G Cat1 核心板简介YEDM724 核心板是由银尔达&#xff08;yinerda&#xff09;基于合宙Air724 模组推出的低功耗&#xff0c;超小体积&#xff0c;高性能嵌入式4G Cat1 核心板。YED-M724嵌入式4G Cat1 核心板特点1、支持5-16V 供电&#xff1b;2、工作环境为-35℃…

基于轻量级YOLOV5融合RepVGG的电梯内电动车检测识别分析系统

RepVGG: Making VGG-style ConvNets Great Again 是2021 CVPR的一篇论文&#xff0c;正如他的名字一样&#xff0c;使用structural re-parameterization的方式让类VGG的架构重新获得了最好的性能和更快的速度。将RepVGG的设计思想融合进入到yolov5目标检测模型中是否有性能的提…