React18源码: reconcliler启动过程

Reconcliler启动过程

  • Reconcliler启动过程实际就是React的启动过程
  • 位于react-dom包,衔接reconciler运作流程中的输入步骤.
  • 在调用入口函数之前,reactElement(<App/>) 和 DOM对象 div#root 之间没有关联,用图片表示如下:
  • 在启动时,在React内部,一般来说,会生成3个对象,都是全局对象

创建全局对象

  • 1 )ReactDOM(Blocking)Root对象

    • ReactDOM对象,也就是Root对象
    • 属于react-dom包,该对象暴露有render, unmount方法,通过调用该实例的render方法
    • 可以引导react应用的启动
  • 2 )FiberRoot 对象

    • 属于react-reconciler包,作为react-reconciler在运行过程中的全局上下文,
    • 保存fiber构建过程中所依赖的全局状态
    • 其大部分实例变量用来存储fiber构造循环过程的各种状态
    • react应用内部,可以根据这些实例变量的值,控制执行逻辑
  • 3 )HostRootFiber 对象

    • 属于react-reconciler包,这是react应用中的第一个Fiber对象
    • 是Fiber树的根节点,节点的类型是HostRoot.
  • 这3个对象是react体系得以运行的基本保障

  • 一经创建大多数场景不会再销毁(除非卸载整个应用root.unmount())

  • 这一过程是从react-dom包发起,内部调用了react-reconciler包

  • 核心流程图如下,其中红色标注了3个对象的创建时机

创建ReactDOM Root对象

  • 1.调用 ReactDOM. createRoot创建 ReactDOMRoot例
  • 2.调用ReactDOMRoot例的render方法
  • 3.调用createRootImpl创建fiberRoot对象,并将其挂载到this._internalRoot上.
  • 4.原型上有render和 unmount方法,且内部都会调用 updateContainer进行更新.

创建fiberRoot对象{#create-root-impl}

  • 无论哪种模式下,在ReactDOM(Blocking)Root的创建过程中

  • 都会调用一个相同的函数createRootImpl,查看后续的函数调用

  • 最后会创建fiberRoot对象(在这个过程中,特别注意RootTag的传递过程)

    // 注意:2种模式下的tag是各不相同(分别是ConcurrentRoot,LegacyRoot).
    this._internalRoot = createRootImpl(container, tag, options);
    
    function createRootImpl(container:Container,tag: RootTag,options: void RootOptions,
    ) {// ...省略部分源码(有关hydrate服务端渲染等,暂时用不上)// 1.创建fiberRootconst root = createContainer(container, tag, hydrate, hydrationCallbacks);// 2.标记dom对象,把dom和fiber对象关联起来markContainerAsRoot(root.current, container);// ...省略部分无关代码return root;
    }
    
    export function createContainer(containerInfo: Container,tag: RootTag,hydrate: boolean,hydrationCallbacks: null SuspenseHydrationCallbacks,
    ): OpaqueRoot {// 创建fiberRoot对return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
    }
    

创建HostRootFiber对象

  • 在createFiberRoot中,创建了 react应用的首个fiber对象

  • 称为 HostRootFiber(fiber.tag = HostRoot)

    export function createFiberRoot(containerInfo: any,tag: RootTag,hydrate: boolean,hydrationCallbacks: null | SuspenseHydrationCallbacks,
    ): FiberRoot {// 创建fiberRoot对象,注意RootTag的传递const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);// 1.这里创建了`reac`应用的首个`fiber`对象,称为`HostRootfiber`const uninitializedFiber = createHostRootFiber(tag);root.current = uninitializedFiber;uninitializedFiber.stateNode = root;// 2.初始化HostRootFiber的updateQueueinitializeUpdateQueue(uninitializedFiber);return root;
    }
    
  • 注意:fiber树中所有节点的mode都会和HostRootFiber.mode一致

  • 新建的fiber节点,其mode来源于父节点,所以HostRootFiber.mode非常重要

  • 它决定了以后整个fiber树构建过程.

  • 运行到这里,3个对象创建成功,react应用的初始化完毕

可中断渲染

  • react中最广为人知的可中断渲染
    • render可以中断,部分生命周期函数有可能执行多次
    • UNSAFE_componentwillMount, UNSAFE_componentWillReceiveProps
    • 只有在 HostRootFiber.mode === ConcurrentRoot 才会开启如果使用的是legacy
    • 即通过 ReactDOM.render(<App/>,dom) 这种方式启动时
    • HostRootFiber.mode = NoMode
  • 这种情况下无论是首次render还是后续update都只会进入同步工作循环
  • reconciliation没有机会中断,所以生命周期函数只会调用一次

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

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

相关文章

电商+支付双系统项目------电商系统中订单模块的开发

这篇文章是关于项目的订单模块的设计。这个模块其实相对来讲比之前的模块复杂了点&#xff0c;我这里说的复杂并不是说难以理解&#xff0c;而是说文件比较多&#xff0c;理解起来还是蛮轻松的。 我们还是老方法&#xff0c;一步一步的去设计&#xff0c;按照Dao->service-&…

建立不同类型网站分别大概需要多少钱??

如今&#xff0c;越来越多的企业会考虑建立一个企业官方网站来展示企业形象&#xff0c;或者建立一个电子商务网站平台来拓展业务渠道&#xff0c;或者建立一个企业内部网来协助企业进行网上工作。 网站建设的类型有很多种&#xff0c;不同类型的网站成本差异很大。 因此&#…

FairyGUI × Cocos Creator 3.x 场景切换

前言 前文提要&#xff1a; FariyGUI Cocos Creator 入门 FairyGUI Cocos Creator 3.x 使用方式 个人demo&#xff1a;https://gitcode.net/qq_36286039/fgui_cocos_demo_dust 个人demo可能会更新其他代码&#xff0c;还请读者阅读本文内容&#xff0c;自行理解并实现。 官…

C++的文件操作详解

目录 1.文本文件 1.写文件 2.读文件 2.二进制文件 1.写文件 2.读文件 1.文本文件 1.写文件 #include<bits/stdc.h> #include<fstream> using namespace std;int main() {ofstream ofs;ofs.open("text.txt",ios::out);ofs << "abc&qu…

2024最新版Python 3.12.2安装使用指南

2024最新版Python 3.12.2安装使用指南 Installation and Usage Guide to the Latest Version - Python 3.12.2 for Windows in 2024 By JacksonML 0. Python的受欢迎程度 据TechRepublic报道&#xff0c;截至2024年2月16日&#xff0c;全球最流行的编程语言之中&#xff0c…

go使用trpc案例

1.go下载trpc go install trpc.group/trpc-go/trpc-cmdline/trpclatest 有报错的话尝试配置一些代理&#xff08;选一个&#xff09; go env -w GOPROXYhttps://goproxy.cn,direct go env -w GOPROXYhttps://goproxy.io,direct go env -w GOPROXYhttps://goproxy.baidu.com/…

普中51单片机学习(红外通信)

红外通信 红外线系统的组成 外线遥控器已被广泛使用在各种类型的家电产品上&#xff0c;它的出现给使用电器提供了很多的便利。红外线系统一般由红外发射装置和红外接收设备两大部分组成。红外发射装置又可由键盘电路、红外编码芯片、电源和红外发射电路组成。红外接收设备可由…

igolang学习2,golang开发配置国内镜像

go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct

Modern C++ std::visit从实践到原理

前言 std::visit 是 C17 中引入的一个模板函数&#xff0c;它用于对给定的 variant、union 类型或任何其他兼容的类型执行一个访问者操作。这个函数为多种可能类型的值提供了一种统一的访问机制。使用 std::visit&#xff0c;你可以编写更通用和灵活的代码&#xff0c;而无需关…

持续集成,持续交付和持续部署的概念,以及GitLab CI / CD的介绍

引言&#xff1a;上一期我们部署好了gitlab极狐网页版&#xff0c;今天我们介绍一下GitLabCI / CD 目录 一、为什么要 CI / CD 方法 1、持续集成 2、持续交付 3、持续部署 二、GitLab CI / CD简介 三、GitLab CI / CD 的工作原理 4、基本CI / CD工作流程 5、首次设置 …

SQL防止注入工具类,可能用于SQL注入的字符有哪些

SQL注入是一种攻击技术&#xff0c;攻击者试图通过在输入中注入恶意的SQL代码来干扰应用程序的数据库查询。为了防止SQL注入&#xff0c;你需要了解可能用于注入的一些常见字符和技术。以下是一些常见的SQL注入字符和技术&#xff1a; 单引号 ​&#xff1a; 攻击者可能会尝试…

【Spring】声明式事务 spring-tx

文章目录 声明式事务是什么&#xff1f;一、Spring事务管理器二、基于注解的声明式事务1.1 准备工作1.2 基本事务控制1.3 事务属性&#xff1a;只读1.4 事务属性&#xff1a;超时时间1.5 事务属性&#xff1a;事务异常1.6 事务属性&#xff1a;事务隔离级别1.7 事务属性&#x…

【vscode】按F5无法执行调试python或go

原因&#xff1a; 找不到解析器&#xff0c;需要安装插件&#xff08;python&#xff0c;或go 等&#xff09; 安装插件后&#xff0c;还是无法执行&#xff0c;按 ctrlshiftp,看不到解析器 正常应该是&#xff1a; 解决方法&#xff1a; 1、判断python是否安装成功 pyth…

2024Node.js零基础教程(小白友好型),nodejs新手到高手,(八)NodeJS入门——http模块

一念心清净&#xff0c;处处莲花开。 055_http模块_网页资源加载基本过程 哈喽&#xff0c;大家好&#xff0c;这一课节我们来介绍一下网页资源加载的基本过程。首先先强调一点&#xff0c;这个内容对于我们后续学习非常非常的关键&#xff0c;所以大家务必要将其掌握。 首先先…

安科瑞企业微电网智慧能源管理系统生态交流会顺利举行

2024年1月12日&#xff0c;安科瑞企业微电网智慧能源管理系统生态交流会顺利举行&#xff0c;本次会议旨在围绕双碳目标&#xff0c;共同探讨如何抓住新机遇、新市场&#xff0c;充分利用安科瑞企业微电网智慧能源的一站式服务&#xff0c;为企业节能、减碳、降本赋能&#xff…

Ansible 简介及部署 基础模块学习 ansible部署rsync 及时监控远程同步

Ansible介绍&#xff1a; Ansible 是一个配置管理系统&#xff0c;当下最流行的批量自动化运维工具之一&#xff0c;它是一款开源的自动化工具&#xff0c;基于Python开发的配置管理和应用部署的工具。 Ansible 是基于模块工作的&#xff0c;它只是提供了一种运行框架&#xff…

STM32控制max30102读取血氧心率数据(keil5工程)

一、前言 MAX30102是一款由Maxim Integrated推出的低功耗、高精度的心率和血氧饱和度检测传感器模块&#xff0c;适用于可穿戴设备如智能手环、智能手表等健康管理类电子产品。 该传感器主要特性如下&#xff1a; &#xff08;1&#xff09;光学测量&#xff1a;MAX30102内置…

nginx-------- 高性能的 Web服务端 (三) 验证模块 页面配置

一、http设置 1.1 验证模块 需要输入用户名和密码 htpasswd 此命令来自于 httpd-tools 包&#xff0c;如果没有安装 安装一下即可 也可以安装httpd 直接yum install httpd -y 也一样 第一次生成文件htpasswd -c 文件路径 姓名 交互式生成密码 htpasswd -bc 文…

c语言的数据结构:找环状链表入口处

一起<(&#xffe3;︶&#xffe3;)↗[GO!] 1.如何判断一个链表是否有环 思路:设定两个快慢指针fast和slow,fast每次走两个结点,slow每次走一个节点 如果fast指针遇到了Null,那么这个链表没有环,如果fast和slow可以相遇,则代表这个链表有环 代码如下 N:fast先进环,slow后…

[C#]winform基于opencvsharp结合CSRNet算法实现低光图像增强黑暗图片变亮变清晰

【算法介绍】 "Conditional Sequential Modulation for Efficient Global Image Retouching" 是一种图像修饰方法&#xff0c;主要用于对图像进行全局的高效调整。该方法基于深度学习技术&#xff0c;通过引入条件向量来实现对图像特征的调制&#xff0c;以达到改善…