React16源码: React中FiberRoot的源码实现

关于 FiberRoot


1 )概述

  • ReactDOM.render 过程当中,创建了一个 ReactRoot的对象
  • 这个 ReactRoot 对象最主要承担了创建 FiberRoot 对象
  • 这个对象它非常重要,在后期整个应用调度过程当中都会跟它有关
  • 关于 FiberRoot 对象
    • A. 它是整个应用的起点
    • B. 它包含了ReactDOM.render 传进去的第二个参数
      • 就是一个dom节点,我们应用挂载的那个节点相关的一些信息
    • C. 它还记录着整个应用更新过程当中的各种信息
      • 应用更新过程当中,会涉及到各种各样的东西
    • 比如,各种不同类型的 expirationTime,还有异步调度任务的callback这些东
    • 都会记录在这个 FiberRoot 上面

2 ) 相关源码

  • 在 ReactRoot 构造函数中基于 DOMRenderer.createContainer 创建了 FiberRoot 对象
    // ReactDOM.js
    function ReactRoot(container: Container,isConcurrent: boolean,hydrate: boolean,
    ) {const root = DOMRenderer.createContainer(container, isConcurrent, hydrate);this._internalRoot = root;
    }// ReactFiberReconciler.js
    export function createContainer(containerInfo: Container,isConcurrent: boolean,hydrate: boolean,
    ): OpaqueRoot {return createFiberRoot(containerInfo, isConcurrent, hydrate);
    }// ReactFiberRoot.js
    export function createFiberRoot(containerInfo: any,isConcurrent: boolean,hydrate: boolean,
    ): FiberRoot {// Cyclic construction. This cheats the type system right now because// stateNode is any.const uninitializedFiber = createHostRootFiber(isConcurrent);let root;if (enableSchedulerTracing) {root = ({// root 节点对应的Fiber对象(root节点也是可能会更新的),是 Root Fiber// 后续整个应用都会有一个Fiber的树结构,任何一个ReactElement的节点都会对应一个Fiber对象// ReactElement是一个树结构, Fiber对象也会有一个树结构// 它是Fiber树结构的顶点current: uninitializedFiber,containerInfo: containerInfo, // ReactDOM.render 传进去的第二个参数 dom 节点pendingChildren: null, // 只有在持久更新中会用到,也就是不支持增量更新的平台,react-dom中不会被用到,在server-render中会被用到,因为它需要输出很多字符串类型的html节点// 以下的优先级是用来区分// 1 ) 没有提交(committed)的任务// 2 ) 没有提交的挂起任务// 3 ) 没有提交的可能被挂起的任务// 最老和最新的不确定是否会挂起的优先级 (所有任务进来一开始都是这个状态)earliestPendingTime: NoWork,latestPendingTime: NoWork,// 最老和最新的在提交的时候被挂起的任务earliestSuspendedTime: NoWork,latestSuspendedTime: NoWork,// 最新的通过一个promise被resolve并且可以重新尝试的优先级latestPingedTime: NoWork,didError: false, // 在renderRoot 出现无法处理的错误时会被设置为 truependingCommitExpirationTime: NoWork, // 正在等待提交的任务的 expirationTime// 已经完成的任务的FiberRoot对象,如果你只有一个Root, 它永远只可能是这个Root对应的Fiber, 或者是 null// 在 commit 阶段只会处理这个值对应的任务// 用于记录在一次更新渲染过程当中完成了的更新任务, 因为整棵树中会存在各种不同的更新任务// 每一次更新会渲染优先级最高的任务,优先级最高的任务渲染完成之后就是一个 finishedWork,标记在应用的Root上面// 更新完了要把应用输出到Dom节点上面,输出的过程就是读取的这个 finishedWork 值finishedWork: null,// 在任务被挂起的时候通过setTimeout设置的返回内容// 用来下一次如果有新的任务挂起时清理还没触发的timeout// 例如:Suspense 组件功能, 在render function 中 throw 一个 Promise, 之后任务会被挂起// 挂起之后可以渲染 Suspense 组件的 fallback, 等到 Promise resolve之后// 它就会把 resolve之后的数据显示出来,这时候就会有一个 timeoutHandle来帮助我们记录超时的情况的// 这个会在后续的更新流程中timeoutHandle: noTimeout,// 顶层 context 对象, 只有主动调用 `renderSubtreeIntoContainer` 时才会有用// `renderSubtreeIntoContainer` 这个API出场率非常低,不常用context: null,pendingContext: null,// 用来确定第一次渲染的时候是否需要融合// 应用是否要跟原来存在的dom节点进行合并hydrate,// 当前root上剩余的过期时间// 用来标记这一次更新渲染的时候要执行的是哪个优先级的任务// 应用更新过程中会遍历到每一个节点,每个节点如果有更新,会有自己的一个 ExpirationTime// root 上记录整个应用当中优先级最高的 ExpirationTime // 在更新的过程中,会根据这个nextExpirationTimeToWorkOn变量去进行一个更新// 就是说如果遍历到某个节点,发现自己的 ExpirationTime 比这个值要大,则说明它优先级要低// 且还轮不到它来更新,就可以进行一个跳过,这就是这个变量的用处nextExpirationTimeToWorkOn: NoWork,// 当前更新对应的过期时间// 用在我们调度的过程当中, 和 上面的 nextExpirationTimeToWorkOn 大部分时间都是相同的// 但是也会有一定的区别expirationTime: NoWork,// 暂时不管这个firstBatch: null,// root之间关联的链表结构// 这个属性是单向链表的属性// 比如,dom节点有 root1 和 root2 两个div// ReactDOM.render 把一个应用渲染在 root1 中,把另一个应用渲染在 root2 中// 这时候会存在两个root, 它们在react中会用 nextScheduledRoot 这个属性进行一个串联// 在整个react更新调度过程中,在这个链表中去找哪个root对应的优先级最高,执行那个root的更新// 一个root里面又会有不同优先级的任务在里面,它整体的过程是非常的复杂nextScheduledRoot: null,interactionThreadID: unstable_getThreadID(),memoizedInteractions: new Set(),pendingInteractionMap: new Map(),}: FiberRoot);} else {root = ({current: uninitializedFiber,containerInfo: containerInfo,pendingChildren: null,earliestPendingTime: NoWork,latestPendingTime: NoWork,earliestSuspendedTime: NoWork,latestSuspendedTime: NoWork,latestPingedTime: NoWork,didError: false,pendingCommitExpirationTime: NoWork,finishedWork: null,timeoutHandle: noTimeout,context: null,pendingContext: null,hydrate,nextExpirationTimeToWorkOn: NoWork,expirationTime: NoWork,firstBatch: null,nextScheduledRoot: null,}: BaseFiberRootProperties);}uninitializedFiber.stateNode = root;// The reason for the way the Flow types are structured in this file,// Is to avoid needing :any casts everywhere interaction tracing fields are used.// Unfortunately that requires an :any cast for non-interaction tracing capable builds.// $FlowFixMe Remove this :any cast and replace it with something better.return ((root: any): FiberRoot);
    }
    

3 )相关解析

  • 注意,上面的各种 Time 非常重要,在后续任务调度的过程中,用来记录更新所涉及的时间的
    • js 在浏览器中是单线程的, 我们的应用又是一个树形结构
    • 如何去区分不同优先级的任务,就要用各种不同的变量去标记
    • 这几个变量就是用于去标识不同优先级的任务的
  • 其他字段参考上述源码中注释的释义

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

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

相关文章

es6中箭头函数 原型

箭头函数 特性 箭头函数的特性 不绑定arguments,用rest参数…解决本身没有this的概念,捕获其所在上下文的 this 值作为自己的 this 值,this指向全局箭头函数不能使用new(会报错)箭头函数没有原型属性(prototype)箭头函…

力扣labuladong一刷day54天前缀树

力扣labuladong一刷day54天前缀树 文章目录 力扣labuladong一刷day54天前缀树一、208. 实现 Trie (前缀树)二、648. 单词替换三、211. 添加与搜索单词 - 数据结构设计四、1804. 实现 Trie (前缀树) II五、677. 键值映射 一、208. 实现 Trie (前缀树) 题…

linux源码解读系列

Linux 源码解读是一个深入且复杂的领域,涵盖了操作系统的核心部分,包括内核架构、进程管理、内存管理、文件系统、网络通信等。由于 Linux 内核源码庞大且复杂,通常需要具备扎实的操作系统理论知识和C语言编程能力。下面是一些推荐的资源和方…

一键了解获取网页requests方式

目录 一、爬虫原理: 二、安装: 测试: 三、文件的操作 方式一 方式二: 方式三 四、认识User-Agent 4.1、为什么用User-Agent: 步骤: 五、请求方式 5.1、get 5.2、post 六、爬出有中国关键字页面案例 一、爬…

C++用宏实现类成员反射

序 本文我们看下用宏来实现反射,在一些伙伴使用c版本还不是那么高的情况下但又需要反射的一些技巧,这里使用的代码是iguana里的实现,我对它关于反射的地方提炼一下,稍微改动了下。iguana是比较优秀的序列化库,其中使用…

Android TCP、UDP区别

目录 TCP、UDP区别 连接性 可靠性 流量控制和拥塞控制 应用场景 小结 Android 中的TCP、UDP TCP(传输控制协议) UDP(用户数据报协议) 小结 TCP、UDP区别 TCP(传输控制协议)和UDP(用户…

Java开发HttpSession详解

Java开发HttpSession详解 大家好,我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,让我们一同深入探讨Java中的HttpSession,了解其在Web开发中的…

win10下vscode+cmake编译C代码操作详解

0 工具准备 1.Visual Studio Code 1.85.1 2.cmake 3.24.01 前言 当我们只有一个.c文件时直接使用vscodeCode Runner插件即可完成编译,如果我们的工程很复杂包含多个.c文件时建议使用cmake来生成对应的make,指导编译器完成编译,否则会提示各…

【二叉树】二叉树根节点到叶子节点的所有路径和

题目,来自牛客网 法1:使用全局变量 public class Solution {public int res 0;public int sumNumbers (TreeNode root) {if (root null) {return 0;}dfs(root, 0);return res;}public void dfs(TreeNode root, int preSum) {if (root.left null &am…

强化学习的数学原理学习笔记 - 基于模型(Model-based)

文章目录 概览:RL方法分类基于模型(Model-Based)值迭代(Value Iteration)🟦策略迭代(Policy Iteration)🟡截断策略迭代(Truncated Policy Iteration&#xff…

YOLOv5改进 | 损失函数篇 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了YOLOv5的重大改进,特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体,如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU,还融合了“Focus”思想,创造了一系列新的损失函数。这些组合形式的损失函数超过了二十余种,每种都针对特定的…

K8S--安装MySQL8(单机)

原文网址:K8S--安装MySQL8(单机)-CSDN博客 简介 本文介绍K8S部署MySQL8(单机)的方法。 本文的目标 1.通过PV和PVC(hostPath方式)存储MySQL的数据 2.通过Deployment、Service部署MySQL8&…

Java异常机制:从混乱到控制的错误管理艺术

👑专栏内容:Java⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、异常的体系结构1、异常的体系结构2、异常的分类 二、异常的处理1、异常的抛出2、异常的捕获2.1、异常声明throws2.2、try-c…

leaflet:加载本地shp文件,并在地图上显示出来 (138)

第138个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载本地shp文件,利用shapefile读取shp数据,转换为json,利用L.geoJSON()在地图上显示图形。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 文章目录 示例效果安装加载shapefile.j…

Docker使用扩展

日升时奋斗,日落时自省 目录 1、容器 1.1、容器的生命周期 1.1.1、容器OOM 1.1.2、容器异常退出 1.1.3、容器暂停 1.2、容器命令 1.2.1、创建容器 1.2.2、启动容器 1.2.3、容器日志 1.2.4、容器交互 1.2.5、容器停止 1.2.6、扩展 1.3、综合演示 2、存…

ChatGPT | 模型架构 | 应用 | 思考

介绍 ChatGPT 3.5 是 OpenAI 推出的语言模型的一个版本,是 GPT(生成式预训练模型)系列的一部分。在自然语言理解和生成方面具有强大的能力,可以应用于问答系统、文本生成、翻译和对话系统等多个领域。 模型架构 GPT-3.5&#x…

【代码】Keras3.0:实现残差连接

简介 残差连接是一种非常重要的网络结构创新,最早被广泛应用于ResNet(Residual Neural Network)模型中,由何凯明等人在2015年的论文"Deep Residual Learning for Image Recognition"中提出。 核心思想 通过引入“short…

如何查找文献及相关代码

参考文献 1.文献调研之如何查找文献及源码_在哪个网站能下载有代码的文献-CSDN博客 2.如何寻找论文及其相关代码?_google学术中的论文代码怎么找-CSDN博客 3.找论文代码_researchcode-CSDN博客 4. 如何最快速找到自己想要的优质的论文以及代码?一个超强大的网站…

Vue3-42-组件-给组件指定名称 + defineOptions 函数的简单使用

问题说明 当我们在 使用 <script setup> 组合式 API的时候&#xff0c;发现我们并没有给组件指定它的名称。 此时它实际上使用的是 文件的名称 作为组件的名称。 例如 &#xff1a; 组件文件是 【componentABC.vue】 那么这个组件的默认名称就是 【componentABC】.现在我…

Linux stm32串口下载程序

一、工具 使用stm32flash进行串口下载 二、stm32flash安装 sudo apt-get install stm32flash 三、查看串口设备名称 先拔掉串口运行下面指令&#xff0c;获得所有设备名称,插上串口再运行一次&#xff0c;新增的就是串口设备名称&#xff0c;记住串口设备名称&#xff0c;以…