【React】React18核心源码解读

前言

本文使用 React18.2.0 的源码，如果想回退到某一版本执行git checkout tags/v18.2.0即可。如果打开源码发现js文件报ts类型错误请看本人另一篇文章：VsCode查看React源码全是类型报错如何解决。

阅读源码的过程：

  1. 下载源码

  2. 观察 package.json 使用的依赖以及构建相关的脚本

  3. 根据 核心API 寻找对应结构

    • packages/react
    • packages/react-dom
    • packages/react-reconciler
    • packages/scheduler

  4. 串联整个流程

    • React项目初始化，ReactDOM.render（React18之前）、ReactDOM.createRoot（React18）

    • 数据更新是如何触发的，this.setState，setState，forupdate

    • 基本API的使用方式

      • hooks、useState、useReducer、useId

一、ReactElement

React如何通过如下JSX代码生成DOM结构

const Element = (<div>123</div>
)

借助 @babel/plugin-transform-react-jsx-development 进行 Babel 编译，JSX 代码段会变成标准的 React.createElement 调用形式。官方案例链接
在这里插入图片描述
React.createElement 的作用是创建 React元素（JS对象）。

观察源码，可以发现 React 对于开发环境和生产环境的 createElement 做了不同处理。（本文观察的React18.2.0，18.3.0对此进行了小改动）

在这里插入图片描述

先观察生产环境下使用的createElementProd

在这里插入图片描述

根据传入的参数，通过ReactElement()创建一个 React 元素

在这里插入图片描述
在这里插入图片描述

开发环境下的createElementWithValidation最终也是使用ReactElement()生成React元素

在这里插入图片描述

ReactElement工厂函数用于创建一个包含类型、属性、引用、唯一标识符等信息的 React 元素（JS对象）。
生产模式下，只会创建一个简单的元素对象；而在开发模式下，会添加额外的调试信息和验证逻辑，比如 key 和 ref 验证、来源追踪等。

在这里插入图片描述

使用时直接打印组件，分别对应

在这里插入图片描述

查看typeof的标识

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
查看owner

在这里插入图片描述
在这里插入图片描述
发现ReactCurrentOwner.current类型为Fiber

在这里插入图片描述

二、Fiber

Fiber 是自 React 16 开始引入的一种新架构，在此之前采用的 Stack Reconciler会同步地遍历整个组件树，一旦开始渲染，就会阻塞其他任务，直到渲染完成。Fiber 可以将渲染工作拆分为更小的任务单元，每个工作单元只渲染树中的一个节点，并允许在任务之间进行中断和恢复，从而改善了这一问题。

Fiber 使用双缓存机制来管理更新。current tree 代表当前页面显示的 Fiber 树，work-in-progress tree 是当前渲染的新 Fiber 树，当新的 Fiber 树完成时，React 会将其替换为当前树。

1. Fiber工作流程

Fiber工作流程分为两个阶段，分别为 Reconciliation 阶段（调和阶段）以及 Commit 阶段（提交阶段）

Reconciler 阶段「调和阶段」

该阶段会生成Fiber树，得出需要更新的节点信息，可以被中断，去处理更高优先级的任务，比如用户交互和动画。

这个阶段发生在虚拟 DOM，即 Fiber Tree 中，而不会直接影响实际的 DOM。Fiber Tree是链表结构，使用diff算法将递归遍历变成循环遍历，逐步对比每个节点的状态和属性，构建出一棵新的 Fiber 树（work-in-progress tree）。然后配合requestIdleCallback API，实现了任务的拆分、中断和恢复。

Commit 阶段「提交阶段」

一旦 work-in-progress 树构建完成，并确定了需要执行的更新，React 会进入 Commit 阶段，将这些变更应用到真实DOM 中。

当所有的 DOM 更新完成后，React 会将 work-in-progress tree 切换为 current tree，即新的 Fiber 树变成当前页面上展示的树，而之前的 current tree 会被丢弃。这种树的切换类似于双缓存的概念，即始终有一棵树在页面上渲染，而另一棵树则作为工作树进行更新。

该阶段会直接影响真实 DOM，更新操作一旦开始无法被中断，保证了 UI 的一致性和完整性。

三、Hooks

React 使用链表来管理函数组件中的 Hooks，从而确保它们在每次渲染时按照固定的顺序执行和更新。如果强行改变 Hook 的执行顺序则会报错，具体请看本人另一篇文章：为什么Hooks不能出现在判断中。

下面先以使用频率最高的useState为主线，剩余常用hook下文仍会讲述

1. resolveDispatcher

React 的 Hooks 系统通过 ReactDispatcher 来管理不同生命周期阶段的 Hook 调用。不同的渲染阶段（如初次渲染、更新渲染）会使用不同的 dispatcher 实现，以便处理对应阶段的 Hooks 逻辑。

观察常用的Hook，发现调用了 resolveDispatcher，这是一个分发器，主要用于在「函数组件」或自定义 Hook 中获取当前的 ReactDispatcher。

在这里插入图片描述

查看 resolveDispatcher ，它取出并返回了ReactCurrentDispatcher.current。

在这里插入图片描述

继续查看ReactCurrentDispatcher.current，它只是一个简单对象，用于标记当前追踪的分发器。

在这里插入图片描述

Fiber中对ReactCurrentDispatcher.current进行了「初始化」以及「更新」的处理。

在这里插入图片描述

HooksDispatcherOnMount：负责在组件初次挂载（即组件首次渲染）时处理 hooks 的调度工作。
HooksDispatcherOnUpdate： 确保在组件更新阶段，所有 hooks 能够按照正确的顺序和逻辑被执行，并且能够访问和更新之前存储的状态。

下面分别观察二者：

2. HooksDispatcherOnMount

查看最常用的useState

在这里插入图片描述

2.1 mountWordkInProgressHook()

其中 mountWordkInProgressHook() 用于在「函数组件」首次渲染时创建、初始化和链接 hooks 对象到链表中并更新指向当前工作中的 hook 节点的指针。保证了 React 在管理和调度 hooks 时，能够按照正确的顺序操作每一个 hook，并在后续的更新过程中正确地访问和更新这些 hooks 的状态。

在这里插入图片描述

2.1.1 mountWordkInProgressHook 链接Hook对象流程

在这里插入图片描述

  1. 创建 Hook 对象

    • memoizedState：用于存储 hook 的状态值，比如 useState 中的状态。
    • baseState：表示 hook 的初始状态。
    • queue：用于存储更新队列，通常用在像 useState 这样的 hook 中。
    • next：指向下一个 hook 对象的引用，形成链表结构。

  2. 链接 Hook 链表
    「创建第一个 hook」 ：workInProgressHook 通常为 null，会将 firstWorkInProgressHook 指向这个新创建的 hook 对象。
    「后续的 hook」：会将新创建的 hook 对象链接到当前链表的末尾（workInProgressHook.next = hook），确保 hook 的执行顺序。

  3. 更新 Hook 指针:
    在每次创建完新的 hook 对象后，会更新 workInProgressHook 指针，使其指向刚刚创建并链接的 hook。确保下一次 mountWorkInProgressHook() 时，能正确地将新 hook 链接到链表的末尾。

2.2 queue

继续往下阅读代码，这一部分是对setState函数方式赋值的处理。

const [count, setCount] = useState(() => 0)

在这里插入图片描述
得到 initialState 后，将其赋值给上一步 mountWordkInProgressHook() 创建的 hook对象 的 memoizedState 和 baseState。

然后创建 queue 状态更新队列，其中

  • pending ：存储当前挂起的更新链表，当有新的状态更新时，它们会被追加到这个链表中，等待被处理。
  • lanes ：更新的优先级，NoLanes 是默认值，表示当前没有分配任何特定的优先级。
  • dispatch ：一个函数引用，用于触发状态更新。调用 setState 或 dispatch，实际上就是在触发 queue.dispatch，这会触发一个新的状态更新流程。
  • lastRenderedReducer ：上一次渲染时使用的 reducer 函数，reducer 函数用于计算新的状态，basicStateReducer 是默认的 reducer 表示直接返回新的状态值。
  • lastRenderedState ：组件上一次渲染时的状态值，用来确定是否需要触发重新渲染（如果和本次一致则不会重新渲染）。

扩展： queue.lanes 在 React18 之前是通过 expirationTime 实现的，但是 React18 引入了新模型lanes，它可以「中断更新」而且「排队」、「插队」也更优。

2.3 dispatchSetState()

继续阅读代码，dispatch通过 dispatchSetState() 实现，这个函数根据当前的渲染状态决定如何处理更新，并在需要时触发组件的 「重新渲染」。

代码如下：

在这里插入图片描述
在这里插入图片描述
参数

  • fiber: 当前组件对应的 Fiber 节点（组件的状态和结构）。
  • queue: 状态更新队列 UpdateQueue，存储了该组件的所有挂起的状态更新。
  • action: 用户触发的状态更新动作，可能是新的状态值或状态更新函数。

逐行分析 dispatchSetState()

  • const lane = requestUpdateLane(fiber); 获取更新的优先级
  • 更新update（状态更新的对象）
  • 处理渲染在这里插入图片描述

dispatchSetState()中还有一个很重要的函数：requestEventTime()，它用于在 React 调度事件时，根据不同的上下文返回合适的时间戳。

在这里插入图片描述
继续查看 requestEventTime() 中 now() 的实现：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
通过代码可以发现 React 优先使用 performance.now() 提供高精度的时间戳，用于调度和优化渲染过程，对于不支持 performance.now() 的环境则使用Date.now()。二者的差别可以看本人另一篇文章Date.now()与performance.now()。

2.4 return

return就非常眼熟了，返回的数组元素分别为状态以及修改状态，这里有个小问题，可以看本人另一篇文章：useState为何返回数组而非对象

在这里插入图片描述

2.5 basicStateReducer

通过 mountState 和 mountReducer 可以证实 useState 是 useReducer 的 「语法糖」，useReducer通过参数传递，而useState通过basicStateReducer实现状态更新。

在这里插入图片描述

查看 basicStateReducer

在这里插入图片描述
updateReducer中处理basicStateReducer

在这里插入图片描述

在这里插入图片描述

3. HooksDispatcherOnUpdate

更新

在这里插入图片描述
updateState中进行updateReducer

在这里插入图片描述

4. useCallback

经过上面的流程，此时已经对useState工作机制了解了，再来看看useCallback

4.1 挂载

同样是通过mountWorkInProgressHook() 创建、初始化和链接 hooks 对象到链表中并更新指向当前工作中的 hook 节点的指针，判断依赖数组并更新hook状态。

在这里插入图片描述

4.2 更新

如果为hook已有状态（更新渲染）、提供了有效依赖数组、依赖数组与前一次状态一致，则沿用上一次缓存的callback，否则采用传入的。

在这里插入图片描述

在这里插入图片描述

is()用于比较两个值是否完全一致

在这里插入图片描述

即使 NaN 也会视为相等

在这里插入图片描述

5. useMemo

再来看看 useMemo，不同于 useCallback 返回函数，useMemo针对的是值，其余逻辑一致。

在这里插入图片描述
在这里插入图片描述

6. useEffect

先来看挂载阶段的mountEffect

在这里插入图片描述

在这里插入图片描述

6.1 mountEffectImp 和 updateEffectImpl

mountEffectImpl 的任务就是挂载一个新的 useEffect，并根据依赖数组确定副作用的触发条件。

在这里插入图片描述
updateEffectImpl 用于更新 useEffect

在这里插入图片描述
不论是mountEffectImpl还是updateEffectImpl最终都执行pushEffect，下面继续查看updateEffectImpl。

6.1.1 pushEffect

pushEffect用于创建一个副作用对象，并将它添加到 hook 的链表中。

在这里插入图片描述

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

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

相关文章

亚信安全DeepSecurity中标知名寿险机构云主机安全项目

亚信安全DeepSecurity中标知名寿险机构云主机安全项目

近日&#xff0c;亚信安全DeepSecurity成功中标国内知名寿险机构的云主机安全项目。亚信安全凭借在云主机安全防护领域的突出技术优势&#xff0c;结合安全运营的能力&#xff0c;以“实战化”为指导&#xff0c;为用户提供无惧威胁攻击、无忧安全运营的一站式云安全体系&#…
阅读更多...
前端 eslint 配置，以及在git提交之前自动format

前端 eslint 配置，以及在git提交之前自动format

目录 1、配置eslint步骤 1、eslint安装配置步骤 2、配置scripts步骤 3、测试eslint 2、配置git-hook1、安装环境2、最终效果 众所周知&#xff0c;前端项目可以在报很多error的情况下运行。但是良好的代码规范仍然有利于项目的开发维护&#xff0c;这里提供我的规范&#xff0c…
阅读更多...
Spring Boot实现的中小企业设备信息管理系统

Spring Boot实现的中小企业设备信息管理系统

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…
阅读更多...
vue使用阿里svg图标

vue使用阿里svg图标

最近开发项目的写前端时候&#xff0c;发现element的图标库不能满足我的需求&#xff0c;当然&#xff0c;大部分是够用的&#xff0c;不过某些特定按钮没有合适的图标,我是发现没有批量导入按钮的图标&#xff0c;所以找了阿里的适量图标库来使用 阿里矢量图标库 阿里矢量图…
阅读更多...
【PythonWeb开发】Flask-RESTful参数解析

【PythonWeb开发】Flask-RESTful参数解析

flask-restful中的reqparse.RequestParser是一个用于解析和验证参数的工具。它可以帮助开发者从请求中提取参数&#xff0c;并确保这些参数符合预期的格式和类型。参数解析的意思就是规范化传入的参数并获取到这些参数。 一、什么是 reqparse.RequestParser&#xff1f; reqpa…
阅读更多...
深入了解 kotlinx-datetime：配置与使用指南

深入了解 kotlinx-datetime：配置与使用指南

深入了解 kotlinx-datetime&#xff1a;配置与使用指南 在Kotlin多平台开发中&#xff0c;处理日期和时间是常见的需求。kotlinx-datetime库提供了强大且简洁的API来帮助开发者应对这一挑战。本文将详细介绍如何配置kotlinx-datetime库&#xff0c;并通过生动的示例演示其核心…
阅读更多...
ventoy安装和使用

ventoy安装和使用

本文涉及一种快捷安装不同版本操作系统的工具的安装和使用。 背景 笔者以前安装系统&#xff0c;一般是先下载系统ISO镜像&#xff0c;使用UltraISO将镜像写入U盘&#xff0c;然后用U盘启动。 近年来着手国产化的适配工作&#xff0c;当然因故无法接触核对业务&#xff0c;主…
阅读更多...
《Python游戏编程入门》注-第4章1

《Python游戏编程入门》注-第4章1

《Python游戏编程入门》的第4章是“用户输入&#xff1a;Bomb Cathcer游戏”&#xff0c;通过轮询键盘和鼠标设备状态实现Bomb Cathcer游戏。 1 Bomb Cathcer游戏介绍 “4.1 认识Bomb Cathcer游戏”内容介绍了Bomb Cathcer游戏的玩法&#xff0c;即通过鼠标来控制红色“挡板”…
阅读更多...
Unity3D学习FPS游戏（5）武器瞄准和准星

Unity3D学习FPS游戏（5）武器瞄准和准星

前言&#xff1a;一个FPS游戏最基本的角色控制&#xff0c;在前面几篇已经基本实现&#xff0c;接下来我们将进入到武器篇。本篇将实现武器武器瞄准和准星。 武器瞄准和准星 武器瞄准思路实现效果 武器准星思路实现效果 补充知识协程线性插值 武器瞄准 思路 FPS游戏在准备开枪…
阅读更多...
vue-echarts使用

vue-echarts使用

vue-echarts使用 排名柱状图示例代码 汇总示例代码 平均时效示例代码 全图 排名柱状图 示例 代码 // 排名趋势<!-- 排名数据趋势图 --><div class"rank"><div class"rank_title"><div class"rank_title_left"><spa…
阅读更多...
大语言模型及LangChain介绍

大语言模型及LangChain介绍

1. 大语言模型介绍 1.大语言模型总览 LangChain 是一个用于构建基于语言模型的应用程序的框架&#xff0c;特别是与大型语言模型&#xff08;LLMs&#xff09;交互的应用。它旨在简化和加速开发过程&#xff0c;使开发者能够更轻松地创建复杂的自然语言处理&#xff08;NLP&a…
阅读更多...
【04】RabbitMQ的集群机制

【04】RabbitMQ的集群机制

1、RabbitMQ的性能监控 关于RabbitMQ的性能监控&#xff0c;在管理控制台中提供了非常丰富的展示。例如&#xff1a;首页这个整体监控页面&#xff0c;就展示了非常多详细的信息&#xff1a; 还包括消息的生产消费频率、关键组件的使用情况等等非常多的消息。都可以在这个管理…
阅读更多...
GO语言实现AES-CFB加密

GO语言实现AES-CFB加密

这里为了使用方便&#xff0c;实现代码不作为一个函数而是作为一个包&#xff0c;这样在后面的代码中也可以进行复用。包和导入 package encryptimport ("crypto/aes" // 提供 AES 加密算法实现"crypto/cipher" // 提供加密算法接口和模式&…
阅读更多...
富格林：利用可信经验敢于追损

富格林：利用可信经验敢于追损

富格林指出&#xff0c;在解决因陷阱而导致的亏损问题时&#xff0c;投资者自己首先要具备可信经验以及敢于追损的决心。客观来说&#xff0c;当今贵金属投资行业中的陷阱并不复杂&#xff0c;多半是通过一些伪装和噱头来实现亏损陷阱的布置。富格林将分享以下可信投资经验加强…
阅读更多...
Segugio：一款针对恶意软件的进程执行跟踪与安全分析工具

Segugio：一款针对恶意软件的进程执行跟踪与安全分析工具

关于Segugio Segugio是一款功能强大的恶意软件安全分析工具&#xff0c;该工具允许我们轻松分析恶意软件执行的关键步骤&#xff0c;并对其进行跟踪分析和安全审计。 Segugio允许执行和跟踪恶意软件感染过程中的关键步骤&#xff0c;其中包括从点击第一阶段到提取恶意软件的最…
阅读更多...
Web框架 --- C#中的ActionFilter

Web框架 --- C#中的ActionFilter

Web框架 --- C#中的ActionFilter 什么是Action Filter如何定义Action Filter如何使用ActionFilter 什么是Action Filter Action Filter 是一种用于在执行controller方法之前或之后执行自定义逻辑的机制。>* Action Filter 可以用来处理各种任务&#xff0c;包括但 不限于 日…
阅读更多...
基于神经网络的农业病虫害损失预测

基于神经网络的农业病虫害损失预测

基于神经网络的农业病虫害损失预测 【摘 要】鉴于农业病虫害经济损失的预测具有较强的复杂性和非线性特性&#xff0c;设计了一种新型的GRNN预测模型&#xff0c;对农业病虫害经济损失进行预测。该模型基于人工神经网络捕捉非线性变化独特的优越性&#xff0c;在神经网络技术和…
阅读更多...
DevCon，我们来了｜DAOBase 线下活动（曼谷站）

DevCon，我们来了｜DAOBase 线下活动（曼谷站）

随着数字化转型的加速&#xff0c;链上经济走在了前沿&#xff0c;为个人和社区赋能。链上金融可以无缝释放更多资金流&#xff0c;用户的链上身份拥有数据控制权&#xff0c;链上游戏能创造身临其境的新体验&#xff0c;许多团队正在打造 Web3 的未来。 本次活动将聚焦在开创…
阅读更多...
python数据处理常用操作

python数据处理常用操作

数据处理是机器学习中非常重要的一步&#xff0c;以下是一些常用的操作和示例代码&#xff1a; 1. 数据清洗 处理缺失值&#xff1a; import pandas as pd# 读取数据 df pd.read_csv(data.csv)# 删除缺失值 df.dropna(inplaceTrue)# 用均值填充缺失值 df.fillna(df.mean(), i…
阅读更多...
YOLO-FaceV2：A Scale and Occlusion Aware Face Detector

YOLO-FaceV2：A Scale and Occlusion Aware Face Detector

摘要 近年来&#xff0c;基于深度学习的人脸检测算法取得了巨大进展。这些算法一般可以分为两类&#xff0c;即像Faster R-CNN这样的两阶段检测器和像YOLO这样的一阶段检测器。由于一阶段检测器在精度和速度之间取得了更好的平衡&#xff0c;因此已被广泛应用于多种场景。在本…
阅读更多...
最新文章

Copyright @ 2022~2023