[FE] React 初窥门径(四):React 组件的加载过程(render 阶段)

1. 回顾

前几篇文章中,我们采用了 VSCode 插件 CodeTour 来记录代码的执行过程,
并把相关的数据 .tour/ 放到了 github: thzt/react-tour 中。

截止到本文为之,我们总共记录了这些 code-tour,

.tour/
├── 2. 构建过程.tour
├── 3.1 react 的加载过程.tour
├── 3.2 react-dom 的加载过程.tour
├── 4.1 组件加载过程:函数组件(call stack).tour
├── 4.1.1 组件加载过程:函数组件(全流程).tour
└── 4.2 组件加载过程:类组件(call stack).tour

本文重点介绍 4.1.1 组件加载过程:函数组件(全流程) 相关的内容。

2. 极简的示例项目

现在我们开始介绍 React 函数组件的加载全流程,我们的示例项目如下,
github: thzt/react-tour/example-project

example-project/
├── README.md
├── package.json
├── public
|  └── index.html
├── src
|  ├── App.js
|  └── index.js
└── yarn.lock

其中,index.js 的内容如下,

import React from 'react';
import ReactDOM from 'react-dom';import App from './App';ReactDOM.render(<App />,document.getElementById('root')
);

App.js 的内容如下,

const App = () => {debugger;return 'hello world'
};export default App;

当前 React 项目只加载了一个 <App /> 组件,这个组件只返回了一段纯文本 'hello world'

与 React 初窥门径(一):环境准备 介绍的一致,我们可以启动项目,

$ yarn
$ yarn start# http://127.0.0.1:3000

3. 调试 Web 项目

参考 React 初窥门径(三):用 VSCode 调试,
我们将 github: thzt/react-tour 中的文件,拷贝到 React 源码根目录,

  • package.json:直接覆盖,其中新增了 debug-build 这个 npm scripts
  • .vscode/:拷贝到 React 源码目录,其中包含了两个 debug 配置,我们要用 Debug React 这个配置
  • .tour/:VSCode CodeTour 插件的数据

整体操作流程如下:
(1)示例项目操作过程

  • 下载 github: thzt/react-tour/example-project 示例项目
  • 给示例项目安装依赖:yarn
  • 替换 example-projectnode_modules 中的依赖 reactreact-dom
    参考 React 初窥门径(一):环境准备
    可使用工具 github: thzt/react-tour/tool/link.bash
  • 启动示例项目:yarn starthttp://127.0.0.1:3000

(2)React 源码操作过程

  • 下载(克隆) React 源码,并切换到 v17.0.2
  • 拷贝 github: thzt/react-tour 中的 package.json .vscode/ .tour/ 到 React 源码目录
  • 选择 Debug React 选项进行调试

我们发现 VSCode 的断点停在了 example-project/src/App.js 文件中。

const App = () => {debugger;              // <- 断点到了这里return 'hello world'
};export default App;

4. 调用栈

我们先来跟踪一下,从 ReactDOM.render 到 App 组件 debugger 位置的调用栈,

在 CodeTour(.tour/)中,也记录了这个过程,

4.1 组件加载过程:函数组件(call stack)

render
legacyRenderSubtreeIntoContainer
unbatchedUpdates
fn
updateContainer
scheduleUpdateOnFiber
performSyncWorkOnRoot
renderRootSync
workLoopSync
performUnitOfWork
beginWork$1
beginWork
mountIndeterminateComponent
renderWithHooks

以上调用栈只展示了函数的链式调用关系,如果用缩进表示调用链路的话,它应该是这样的,

renderlegacyRenderSubtreeIntoContainerunbatchedUpdatesfnupdateContainerscheduleUpdateOnFiberperformSyncWorkOnRootrenderRootSyncworkLoopSyncperformUnitOfWorkbeginWork$1beginWorkmountIndeterminateComponentrenderWithHooks

它表示 render 调用了 legacyRenderSubtreeIntoContainer
legacyRenderSubtreeIntoContainer 又调用了 unbatchedUpdates
unbatchedUpdates 又调用了 fn 等等,直到最后调用了 renderWithHooks

最后 renderWithHooks 调用了函数组件 App,来到断点那里。

5. 全流程

只看调用栈的话,React 组件的加载过程还不完整,我们知道某个函数之前别调用之前,是否还调用了其他函数,
以下我们整理了从 renderApp 调用的全流程(函数前面的数字,表示缩进层次)。

4.1.1 组件加载过程:函数组件(全流程)
(下图包含代码折叠,而且只截了一部分,完整版请查看上面的链接)

6. render 和 commit 阶段

全流程包含了特别多的细碎逻辑,我们首先想弄明白的是,

  • 组件是何时被调用的,组件返回之后发生了什么(render 阶段)
  • 组件是如何展示在页面上的(commit 阶段)

这两个阶段,就是 performSyncWorkOnRoot 做的事情了,在大图中它处于这个位置,

可以看到:

  • render 阶段(renderRootSync:根据用户创建的 React 组件,创建 Fiber Tree(先从上到下 performUnitOfWork ,再从下到上 completeWork
  • commit 阶段(commitRoot:把 Fiber Tree 实际写入到 DOM 中

一图胜千言,(函数前面的数字,表示缩进层次)

[6] performSyncWorkOnRoot[7] renderRootSync[8] markRenderStarted                                         <- render 阶段开始[8] workLoopSync[9] performUnitOfWork ---- [HostRoot {tag: 3}]              <- 从 根元素 开始向下构建 Fiber Tree[10] beginWork$1[11] beginWork[12] updateHostRoot                                   <- 加载 根元素 HostRoot[13] reconcileChildren[14] reconcileChildFibers                         <- 创建 child 子元素[15] reconcileSingleElement[16] createFiberFromElement[17] createFiberFromTypeAndProps[18] createFiber[9] performUnitOfWork ---- [IndeterminateComponent {tag: 2}] (<App />)[10] beginWork$1[11] beginWork[12] mountIndeterminateComponent                      <- 加载 函数组件 App[13] renderWithHooks[14] Component[13] reconcileChildren[14] mountChildFibers=reconcileChildFibers        <- 创建 child 子元素[15] reconcileSingleTextNode[16] deleteRemainingChildren[16] createFiberFromText[17] createFiber[9] performUnitOfWork ---- [HostText {tag: 6}] ('hello world')[10] beginWork$1[11] beginWork[12] updateHostText                                   <- 加载 纯文本 'hello world'[10] completeUnitOfWork                                   <- 开始倒着从 子节点 向上到 根节点 进行梳理[11] completeWork ---- [HostText {tag: 6}] ('hello world')[12] createTextInstance[13] createTextNode[14] createTextNode [HTMLElement] ('hello world') <- 实际创建 HTML[11] completeWork ---- [IndeterminateComponent {tag: 2}] (<App />)[11] completeWork ---- [HostRoot {tag: 3}][8] markRenderStopped                                         <- render 阶段结束[7] commitRoot                                                  <- commit 阶段开始

下文我们再仔细介绍 commit 阶段。


参考

github: facebook/react v17.0.2
VSCode: CodeTour
github: thzt/react-tour
github: thzt/react-tour/example-project
React 初窥门径(一):环境准备
React 初窥门径(三):用 VSCode 调试
4.1 组件加载过程:函数组件(call stack)
4.1.1 组件加载过程:函数组件(全流程)

最后编辑于:2024-10-27 15:38:40


喜欢的朋友记得点赞、收藏、关注哦!!!

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

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

相关文章

ASP .NET CORE 6 在项目中集成WatchDog开源项目

概念 WatchDog是一个开源的项目&#xff0c;可以实现对.Net 应用程序和API实现实时应用日志和性能监控平台。可以实现实时记录和查看应用程序中的消息、事件、HTTP请求和响应&#xff0c;以及运行时捕获的异常&#xff0c;有效帮助开发人员去排查应用异常&#xff0c;提升开发效…

Chrome浏览器音/视频无法自动播放

背景&#xff1a;由于google的一些制度&#xff0c;我们在写html项目时会发现刷新页面时无法自动播放audio和video&#xff0c;即使你添加了autoplay属性也无济于事&#xff0c; 但是IE和Edge浏览器是可以自动播放的。 解决方案&#xff1a; 本人在网上搜寻了很多方法&#xf…

WPF自定义日历控件Calendar 的方法

推荐下载地址 https://www.haolizi.net/example/view_2107.html <UserControl.Resources><local1:DayConverter x:Key"DayConverter"/><!--导入转换器--><Style x:Key"CalendarStyle1"TargetType"{x:Type Calendar}">&…

TOEIC 词汇专题:旅游计划篇

TOEIC 词汇专题&#xff1a;旅游计划篇 制定旅行计划时&#xff0c;尤其是跨国旅游&#xff0c;会涉及到很多独特的英语词汇。以下是与“旅游计划”相关的托业词汇&#xff0c;帮助你更加自如地规划行程。 1. 旅行服务和优惠 出发前了解一下与服务和优惠相关的常用词汇&#…

Java集合框架面试指南

Java集合框架面试指南 文章目录 Java集合框架面试指南ArrayList特点&#xff1a;LinkedList特点&#xff1a;ArrayDeque特点&#xff1a;PriorityQueue特点&#xff1a;HashMap特点&#xff1a;HashSet特点&#xff1a;LinkedHashMap特点LinkedHashMap经典用法 TreeMap特点Conc…

QEMU学习之路(4)— Xilinx开源项目systemctlm-cosim-demo安装与使用

QEMU学习之路&#xff08;4&#xff09;— Xilinx开源项目systemctlm-cosim-demo安装与使用 一、前言 项目说明&#xff1a;https://xilinx-wiki.atlassian.net/wiki/spaces/A/pages/862421112/Co-simulation 操作系统&#xff1a;Ubuntu 20.04.6 LTS gcc版本&#xff1a;9.4…

【Java知识】高性能网络应用框架Netty应知应会

文章目录 概述线程模型IO模型代码示例服务端代码示例客户端代码示例代码说明&#xff1a; 自定义协议实现自定义协议格式自定义编码器&#xff08;Encoder&#xff09;自定义解码器&#xff08;Decoder&#xff09;业务处理器&#xff08;Handler&#xff09;在Netty服务器管道…

AUTOSAR 规范中的设计模式:传感器执行器模式

在 AUTOSAR Adaptive Platform (AP) 规范中,传感器执行器模式是一种典型的设计模式,主要用于实时控制系统中,用来实现传感器数据的获取和执行器指令的发送。该模式通过分离传感器和执行器的实现,使其独立运行并且能够通过某种通信机制进行数据交换,以确保数据的实时性和系…

Linux:编辑器Vim和Makefile

✨✨所属专栏&#xff1a;Linux✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ vim的三种常用模式 分别是命令模式&#xff08;command mode&#xff09;、插入模式&#xff08;Insert mode&#xff09;和底行模式&#xff08;last line mode&#xff09; 各模式的功能区分如下&…

【Linux】【进程控制】API汇总整理

进程控制是操作系统中一个非常重要的概念&#xff0c;它涉及到创建、管理和终止进程的能力。进程控制包括一系列操作&#xff0c;如创建新进程、等待进程结束、发送信号给进程等。下面是进程控制中一些常见的操作及其相关API&#xff1a; 进程控制概述 进程控制是指操作系统提…

HTML练习题:彼岸的花(web)

展示效果: 代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>彼岸の花</title><style…

【安全性分析】正式安全分析与非正式安全分析

安全性分析-系列文章目录 第一章 【安全性分析】正式安全分析与非正式安全分析 第二章 【安全性分析】BAN逻辑 (BAN Logic) 文章目录 安全性分析-系列文章目录前言一、正式安全分析1. 理想化模型(如随机预言机模型)2. 标准模型(Standard Model)3. 形式化验证4. 数学证明二…

HTML小阶段二维表和思维导图

下面是对标签、元素、属性的对比二维表&#xff0c;通过对比3w1h&#xff08;what是什么、where用在哪、why为什么要用、how如何用&#xff09;来学习区分学习标签、元素、属性 标签 元素 属性 what &#xff08;Tags&#xff09;标签是用来标记内容块或标明元素内容意义 …

NIO 核心知识总结

在传统的 Java I/O 模型&#xff08;BIO&#xff09;中&#xff0c;I/O 操作是以阻塞的方式进行的。也就是说&#xff0c;当一个线程执行一个 I/O 操作时&#xff0c;它会被阻塞直到操作完成。这种阻塞模型在处理多个并发连接时可能会导致性能瓶颈&#xff0c;因为需要为每个连…

助力风力发电风机设备智能化巡检,基于YOLOv7全系列【tiny/l/x】参数模型开发构建无人机巡检场景下风机叶片缺陷问题智能化检测预警模型

在全球能源转型的大潮中&#xff0c;清洁环境能源的发展已成为各国关注的焦点。风力发电作为其中的佼佼者&#xff0c;以其可再生、无污染的特点&#xff0c;受到了广泛的青睐。然而&#xff0c;风力发电设施大多建于人迹罕至的地区&#xff0c;设备庞大且复杂&#xff0c;其维…

Apache POI(java操作Miscrosoft Office)

Apache POI 1.1 介绍 Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。 一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 Apache POI 的应用场景&a…

C++ | Leetcode C++题解之第537题复数乘法

题目&#xff1a; 题解&#xff1a; class Solution { public:string complexNumberMultiply(string num1, string num2) {regex re("\\|i"); vector<string> complex1(sregex_token_iterator(num1.begin(), num1.end(), re, -1), std::sregex_token_iterator…

Java ==> String类(字符串)

文章目录 一、认识String类1、创建String对象2、不可变的String3、字符串常量池 二、字符串常用操作1、字符串比较1.1 用“”比较1.2 用equals()方法比较1.3用compareTo()方法进行比较 2、获取字符串长度3、字符串查找4、字符串转换4.1valueOf()数值转换为字符串4.2字母大小写转…

Qt中的Model与View 4:QStandardItemModel与QTableView

目录 QStandardItemModel API QTableView 导航 视觉外观 坐标系统 API 样例&#xff1a;解析一个表格txt文件 QStandardItemModel QStandardItemModel 可用作标准 Qt 数据类型的存储库。它是模型/视图类之一&#xff0c;是 Qt 模型/视图框架的一部分。它提供了一种基于…

【SpringMVC】传递json,获取url参数,上传文件

【传递json数据】 【json概念】 一种轻量级数据交互格式&#xff0c;有自己的格式和语法&#xff0c;使用文本表示一个对象或数组的信息&#xff0c;其本质上是字符串&#xff0c;负责在不同的语言中数据传递与交换 json数据以字符串的形式体现 【json字符串与Java对象互转…