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,一经查实,立即删除!

相关文章

杂题——1106: 奖学金

题目描述 某小学最近得到了一笔赞助&#xff0c;打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金。期末&#xff0c;每个学生都有3门课的成绩:语文、数学、英语。先按总分从高到低排序&#xff0c;如果两个同学总分相同&#xff0c;再按语文成绩从高到低排序&#xff0c;…

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

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

C语言获取时间与日期的函数大全

一、最简单获取秒数的&#xff0c;windows和linux都支持用time()函数,获取从1970年到现在过了多少秒&#xff0c;time_t其实是long int 类型 time_t starttime(NULL); for(long i0;i<10000000000;) i1; time_t endtime(NULL) printf("经过了%d秒",end-start); 二…

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

如今&#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…

剩余银饰的重量(C语言)

题目描述 有 N 块二手市场收集的银饰&#xff0c;每块银饰的重量都是正整数&#xff0c;收集到的银饰会被熔化用于打造新的饰品。 每一回合&#xff0c;从中选出三块 最重的 银饰&#xff0c;然后一起熔掉。假设银饰的重量分别为 x 、y 和 z&#xff0c;且 x < y < z。那…

FFmpeg——avio_reading实例(学习)

目录 前言一、源码二、分析1、av_file_map函数2、avformat_alloc_context函数3、avio_alloc_context函数4、avformat_open_input函数5、avformat_find_stream_info函数 前言 avio_reading是关于对音视频流内存读取操作的应用实例&#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

什么是系统工程(字幕)36

0 00:00:00,980 --> 00:00:03,240 那首先的话是给 1 00:00:03,820 --> 00:00:06,646 给水加上这个值属性 2 00:00:06,646 --> 00:00:11,170 你看&#xff0c;水之前在这里嘛&#xff0c;没有 3 00:00:11,450 --> 00:00:12,959 属性的&#xff0c;对吧 4 00:00:…

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…

QT之QString.arg输出固定位数

问题描述 我需要用QString输出一个固定位数的数字字符串。起初我的代码是这样&#xff1a; int img_num 1 auto new_name QString("%1.png").arg((int)img_num, 3, 10, 0); //最后一个参数用u0也是一样的 qDebug() << "new_name:" << new…

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

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