React 学习笔记：深入剖析 ReactDOM.render（上）

React 学习笔记：深入剖析 ReactDOM.render（上）

引子

在上一章节，我们站在宏观角度对 Fiber 的架构分层和迭代动机有了充分的把握。从本章节开始，将以首次渲染为切入点，拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路，结合源码逐步剖析 Fiber 架构的各个阶段，包含 Fiber 节点、任务调度、渲染过程等。

Fiber 架构的引入

在 React 16 版本之前，React 使用的是基于栈的协调算法，即在每次更新时，会创建一个更新队列，然后在下次更新时将这些更新依次应用到 DOM 中。这种方式虽然简单直接，但存在一些问题：

• 无法中断更新过程，导致更新过程的性能难以优化。
• 难以实现并发更新，当有多个更新同时发生时，无法保证更新的顺序。
• 难以实现优先级更新，当存在多个不同优先级的更新时，无法保证优先级高的更新先于优先级低的更新应用。

为了解决这些问题，React 16 引入了 Fiber 架构。Fiber 架构是一种基于链表的协调算法，它将更新视为一个个独立的任务，并通过链表将这些任务串联起来。这样，当需要更新时，可以中断更新过程，也可以实现并发更新和优先级更新。

ReactDOM.render 的工作原理

ReactDOM.render 是 React 中负责将虚拟 DOM 渲染到真实 DOM 的函数。它的工作原理可以分为以下几个步骤：

1. 创建 Fiber 树

首先，React 会根据虚拟 DOM 创建一个 Fiber 树。Fiber 树是一个链表结构，其中每个 Fiber 节点都对应着虚拟 DOM 中的一个节点。

2. 调度更新

当状态或属性发生变化时，React 会将对应的 Fiber 节点标记为需要更新。然后，React 会根据 Fiber 树的结构和更新的优先级，将更新任务调度到主线程或工作线程。

3. 执行更新

当更新任务被调度到主线程时，React 会执行更新操作。更新操作包括：

• 将虚拟 DOM 中的更改应用到 Fiber 树中。
• 根据 Fiber 树中的更改更新真实 DOM。

4. 提交更新

当更新操作完成后，React 会将更新提交到真实 DOM 中。提交更新的过程包括：

• 将 Fiber 树中的更改应用到真实 DOM 中。
• 清除不需要的 DOM 节点。

小结

在本章节中，我们对 React 中 ReactDOM.render 的工作原理进行了详细的剖析。我们了解到，ReactDOM.render 会根据虚拟 DOM 创建一个 Fiber 树，然后根据 Fiber 树的结构和更新的优先级调度更新任务，并执行更新操作。最后，将更新提交到真实 DOM 中。