IT评测·应用市场-qidao123.com技术社区

标题: React中createRoot函数原明白读——Element对象与Fiber对象、FiberRootNode [打印本页]

---

作者: 盛世宏图    时间: 2025-1-14 00:14
标题: React中createRoot函数原明白读——Element对象与Fiber对象、FiberRootNode
【2024最新版】React18 核心源码分析教程（全61集）

Element对象与Fiber对象

在 React 中，Element 对象 和 Fiber 对象 是核心概念，用于实现 React 的高效渲染和更新机制。以下是它们的具体解读：
1. Element 对象

界说

React 的 Element 对象 是通过 React.createElement 或 JSX 创建的**形貌 UI 的普通 JavaScript 对象**。
结构

一个典型的 React Element 对象的结构如下：

1. const element = {
2.   type: 'div', // 或者是组件函数/类，表示元素类型
3.   props: {
4.     children: [/* 子元素 */],
5.     className: 'example',
6.   },
7.   key: null, // 用于唯一标识（diff 算法优化）
8.   ref: null, // 用于获取组件实例或 DOM
9.   $$typeof: Symbol(react.element), // 用于区分是否是 React 元素
10. };

复制代码

特点

• 不可变：React Element 是不可变的，形貌的是 UI 的快照。
  
• 轻量：它是 UI 的形貌，并不包罗状态或方法。
  
• 静态形貌：只表示渲染内容的静态信息，真正的 DOM 操作由 Fiber 对象实现。
  

---

2. Fiber 对象

界说

Fiber 对象 是 React 16+ 引入的内部数据结构，用于管理组件的更新和渲染工作。
结构

一个 Fiber 对象的基本结构如下：

1. const fiber = {
2.   tag: 5, // 表示 Fiber 类型，比如函数组件、类组件、HostComponent（如 div）
3.   type: 'div', // 与 Element 的 type 对应
4.   key: null, // 用于唯一标识
5.   stateNode: DOM节点或类组件实例, // 当前 Fiber 的实际实例，DOM 节点或类组件实例
6.   child: Fiber, // 第一个子节点
7.   sibling: Fiber, // 下一个兄弟节点
8.   return: Fiber, // 父节点
9.   pendingProps: {}, // 本次更新的新 props
10.   memoizedProps: {}, // 上一次渲染的 props
11.   memoizedState: {}, // 上一次渲染的 state
12.   effectTag: 0, // 副作用标志，表示需要执行的操作类型
13.   nextEffect: null, // 下一个有副作用需要处理的 Fiber
14.   updateQueue: {}, // 存放 state 更新队列
15. };

复制代码

特点

• 动态：Fiber 是 React 的工作单元，包罗组件的状态、更新等动态信息。
  
• 链表结构：
  
  
  
  • Fiber 对象构成了一棵 Fiber 树。
    
  • 每个 Fiber 节点通过 child、sibling 和 return 连接。
    
  
  
• 与 Element 不同的职责：
  
  
  
  • Element 是静态形貌，Fiber 负责调治和计算实际的 UI 变化。
    
  • Fiber 引入了时间切片机制，支持使命停止和优先级调治。
    
  
  
• 双缓存机制：
  
  
  
  • React 使用两棵 Fiber 树（current 和 workInProgress）来实现双缓存，减少不须要的 DOM 操作。
    
  
  

3. Element 和 Fiber 的关系

特性Element 对象Fiber 对象职责形貌 UI管理组件状态、更新使命和渲染天生由 React.createElement 创建由 React 调治和渲染过程天生结构轻量、不可变的 JS 对象复杂、包罗状态和关系的动态对象生命周期创建后一直存在，形貌 UI 快照每次渲染会重新天生或复用关系是 Fiber 的静态输入是 Element 的动态实现

---

4. Fiber 的核心功能

• 调治更新使命：通过优先级控制使命的实行，允许使命停止。
  
• 状态管理：保存组件的状态和属性，管理 setState。
  
• DOM 更新：对比新旧 Fiber 树，天生最小更新路径（Diff 算法）。
  
• 副作用管理：通过 effectTag 管理 DOM 操作、生命周期回调等。
  

---

5. 总结

• React Element 是 UI 的静态形貌，简朴且不可变。
  
• Fiber 是 React 内部的工作单元，负责处置处罚状态、调治更新和渲染。
  

Fiber 的引入是 React 性能优化的关键，尤其是在构建复杂的 UI 和实现时间切片时。Element 和 Fiber 分工明确，共同构建了 React 的高效渲染机制。
FiberRootNode与HostRootFiber

在 React 的内部实现中，HostRootFiber 和 FiberRootNode 是 React 核心中的两个紧张概念，分别与 Fiber 树的根节点和渲染树的管理密切相干。以下是对这两个概念的具体剖析。
1. FiberRootNode

界说

• FiberRootNode 是 React 的根容器节点，用于管理整个应用的 Fiber 树和渲染情况。
  
• 它是 React 应用的真正入口点，通常与宿主情况（如 DOM 或 React Native）的根容器绑定。
  

作用

• 管理宿主情况的渲染目的：
  
  
  
  • 保存与宿主情况相干的信息（如 DOM 容器）。
    
  • 对应浏览器中的根节点（如 document.getElementById('root')）。
    
  
  
• 控制 Fiber 树的生命周期：
  
  
  
  • 通过 current 字段管理当前正在渲染的 Fiber 树。
    
  • 配合双缓存机制，切换 current 和 workInProgress。
    
  
  
• 存储调治信息：
  
  
  
  • 保存使命的优先级（如时间切片相干）。
    
  • 存储更新队列和渲染进度。
    
  
  

结构

FiberRootNode 的典型结构如下：

1. const fiberRootNode = {
2.   containerInfo: DOMContainer, // 宿主环境的根容器，如 DOM 节点
3.   current: HostRootFiber, // 当前的根 Fiber
4.   finishedWork: null, // 已完成的 Fiber 树
5.   pendingLanes: 0, // 表示待处理更新的优先级队列
6.   eventTimes: [], // 记录事件触发时间，用于调度优化
7.   callbackNode: null, // 当前调度的回调函数
8.   callbackPriority: NoPriority, // 当前调度的优先级
9. };

复制代码

2. HostRootFiber

界说

• HostRootFiber 是 React 应用的 Fiber 树的根节点。
  
• 它对应于 React 渲染树的入口点，表示整个应用的根。
  

作用

• 承载应用的 Fiber 树：整个应用的组件树从 HostRootFiber 开始构建，作为 Fiber 树的根节点。
  
• 关联 Fiber 树与渲染器：它是连接 Fiber 树与 DOM（或其他宿主情况，如 React Native）之间的桥梁。
  
• 管理应用状态：
  
  
  
  • HostRootFiber 保存整个应用的状态（如 pendingProps 和 memoizedState）。
    
  • updateQueue 中纪录了根节点的更新使命队列。
    
  
  

结构

HostRootFiber 是一个特殊的 Fiber 节点，具有以下字段：

1. const hostRootFiber = {
2.   tag: HostRoot, // Fiber 类型标记，表示是 HostRoot
3.   stateNode: FiberRootNode, // 指向 FiberRootNode 实例
4.   child: Fiber, // 子节点，指向应用的第一个组件（如 <App />）
5.   pendingProps: {}, // 本次更新传入的 props
6.   memoizedProps: {}, // 已保存的 props
7.   memoizedState: {}, // 当前组件状态
8.   updateQueue: {}, // 存储更新任务的队列
9.   alternate: WorkInProgressFiber, // 指向 workInProgress Fiber，用于双缓存机制
10. };

复制代码

3.FiberRootNode 与 HostRootFiber 的关系

特性HostRootFiberFiberRootNode界说Fiber 树的根节点，代表 React 树的逻辑入口React 根容器，管理 Fiber 树与宿主情况存储内容应用的根组件和状态（App 的入口）宿主情况信息（如 DOM 容器）和调治状态连接关系通过 stateNode 引用 FiberRootNode通过 current 引用 HostRootFiber用途形貌 Fiber 树的根管理整个应用的渲染和更新机制生命周期每次更新会创建新的 workInProgress 副本始终存在，贯穿应用生命周期

---

4. 运行机制中的作用

• 初始化时：
  
  
  
  • React 创建 FiberRootNode 并将 HostRootFiber 挂载到 FiberRootNode 的 current 属性上。
    
  • containerInfo 保存宿主情况的信息。
    
  
  
• 更新时：
  
  
  
  • 更新会从 HostRootFiber 开始，React 使用双缓存机制创建 workInProgress 树。
    
  • 在调和过程中，React 通过 FiberRootNode 调治使命，确保高优先级使命优先完成。
    
  
  
• 渲染完成：
  
  
  
  • 当 Fiber 树完成渲染（即 finishedWork 不为 null），React 将 FiberRootNode.current 切换到新的 Fiber 树。
    
  
  

5. 总结

• FiberRootNode 是管理上的根节点，负责协调 Fiber 树和宿主情况之间的关系。
  
• HostRootFiber 是逻辑上的根节点，形貌了 React 树的结构。
  

它们的协作是 React 内部运行机制的核心，支持了高效的渲染与更新流程。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)

Powered by Discuz! X3.4