React中Element、Fiber、createElement和Component关系
在React中，Element、Fiber、createElement和Component等概念构建了其高效渲染的基石。下面我们逐步解析，并用图表展示它们的关系。
🧱 核心概念解析
⚛️ React Element（元素）
React Element是React应用的最小构建单元，它是一个不可变的普通JavaScript对象，用于描述你希望在屏幕上看到的内容（即UI的轻量级快照）。
- 创建方式：通常由JSX编译或直接调用
React.createElement产生。 - 关键属性：包括
type（元素类型，如'div'或组件函数/类）、props（属性，包含children）、key（优化标识）和ref（引用）等。特殊的$$typeof属性（通常为Symbol(react.element)）用于标识这是一个React元素，也有安全考量。 - 核心特性：不可变性。一旦创建便不可更改。更新界面时，React会创建新的元素树，通过Diffing算法高效更新DOM。
⚙️ React Component（组件）
React Component是返回React Element的代码单元，是可复用的代码块，承载了UI的渲染逻辑和状态。
- 两种形态：
- 函数组件：一个接收
props并返回React Element的JavaScript函数。 - 类组件：一个继承自
React.Component的JavaScript类，必须包含render方法，该方法返回React Element。
- 函数组件：一个接收
- 与Element关系：可以将组件视为元素的“工厂”或“蓝图”。组件执行（函数组件调用或类组件实例化及调用
render方法）后，生成React Element树。
🔨 React.createElement
React.createElement是用于创建React Element的底层API。
- 主要工作：
- 校验和处理参数（
type,config（属性对象），children（子元素））。 - 处理
key和ref等特殊属性。 - 处理
defaultProps。 - 最终调用内部函数（如
ReactElement）创建并返回一个React Element对象。
- 校验和处理参数（
- 与JSX关系：JSX是语法糖，最终会被Babel等工具编译为一系列
React.createElement调用。例如，<div>Hello</div>编译后类似于React.createElement('div', null, 'Hello')。
🧬 Fiber
Fiber是React 16+引入的内部数据结构/架构，是协调（Reconciliation）过程的核心。
- 角色：Fiber代表了一个工作单元。React的渲染和更新过程被分解为多个Fiber节点对应的工作单元，从而可以实现可中断、异步的渲染，以及任务优先级调度。
- 与Element关系：可以理解为，每个React Element在协调过程中都会对应一个Fiber节点。但Fiber承载的信息远多于Element。
- 关键属性（远超Element）：
tag：标识Fiber类型（函数组件、类组件、宿主组件div等）。stateNode：指向对应的类组件实例或DOM节点等。child,sibling,return：构成Fiber树的链表结构指针。memoizedProps,memoizedState：上一次渲染用的props和state。updateQueue：更新队列。alternate：指向当前树（Current Tree）或工作进程树（WorkInProgress Tree）中的对应Fiber，用于双缓存机制。
🔄 核心概念关系图
下图清晰地展示了从JSX到最终页面渲染的完整流程，以及各个核心概念在其中扮演的角色和它们之间的转换关系：
flowchart TDA[JSX/Component] -->|Babel 编译| B[React.createElement调用]B --> C[React Element树<br>（UI结构快照）]C --> D{协调过程开始<br>（Reconciliation）}D --> E[构建WorkInProgress Fiber树<br>（与Current Fiber树对比）]E --> F[Diff算法标记变更]F --> G[提交阶段<br>（Commit Phase）]G --> H[更新DOM]I[Fiber架构] --> EI --> J[实现可中断渲染/双缓存]subgraph K [核心概念转换流程]A --> C --> E --> Hend
⚙️ React的渲染与更新机制
🔎 Diff算法
当组件状态变化时，React会重新渲染组件生成新的React Element树。React需要找出新旧两棵树（在Fiber架构中体现为Fiber树）的差异，这个过程就是协调（Reconciliation），其中使用的差异比较算法就是Diff算法。
- 基本原则：
- 不同类型元素生成不同树：如果根元素类型不同，React会直接拆毁旧树，构建新树。
- Key属性优化列表渲染：对子元素列表，使用
key属性来帮助React识别哪些元素是稳定、可复用的。
- 在Fiber中的实现：Diff算法会对比新的React Element和当前的Fiber节点，并给Fiber节点打上相应的“效果标签”，如
Placement（新增）、Update（更新）、Deletion（删除）等。
🖼️ 双缓存机制
React在内存中同时维护两棵Fiber树：
- Current Tree（当前树）：反映当前UI状态的Fiber树，对应屏幕上显示的内容。
- WorkInProgress Tree（工作进程树）：正在内存中构建的、反映下一次UI状态的Fiber树。
所有更新相关的计算（渲染组件、Diffing）都在WorkInProgress Tree上进行。计算完成后，React通过简单地切换指针，将WorkInProgress Tree变为新的Current Tree，并更新DOM。这类似于图形学中的“双缓存”，能确保视图切换的流畅性，并支持并发渲染特性。
💎 总结与对比
| 概念 | 角色 | 关键特性 | 相互关系 |
|---|---|---|---|
| React Component | UI的蓝图、逻辑单元 | 可复用、含状态/逻辑 | 执行后返回React Element |
| JSX | 声明式UI描述语法 | 语法糖，需编译 | 编译为React.createElement调用 |
| React.createElement | Element创建工厂函数 | 接收参数，输出Element对象 | JSX编译结果，创建React Element |
| React Element | UI结构的轻量级不可变描述 | 不可变对象、虚拟DOM组成部分 | 由组件或createElement产生，是Fiber的输入 |
| Fiber | 内部工作单元、协调核心 | 动态数据结构、可中断/异步、链表连接、双缓存 | 每个Element对应一个Fiber，负责实现更新调度 |
希望这份详细的解释和图表能帮助你彻底理解这些核心概念。