React 工作原理初探（一）：首次渲染

2024-01-24 11:30:16

React，作为当今最流行的前端框架之一，以其高性能、易用性、强大的扩展能力和生态体系备受开发者青睐。尽管 React 取得了巨大的成功，但它内部的原理和机制对于许多开发者来说仍然是模糊不清的。本文将通过一个简单的例子，结合 React 源码（v 16.4.2），逐步揭示 React 内部的工作原理，帮助读者理解 ReactElement、Fiber 之间的关系，以及 Fiber 在各个流程中的作用。

初识 React

在开始探索 React 内部工作原理之前，我们首先来简单回顾一下 React 的基本概念和组件化思想。

React 本质上是一个用于构建用户界面的 JavaScript 库。它通过一种声明式的编程方式来用户界面的结构和行为，并通过虚拟 DOM 和 Diff 算法高效地更新视图。

React 采用组件化设计思想，将复杂的 UI 分解成更小的、可复用的组件。每个组件负责处理自己的数据和逻辑，并通过属性和状态来与其他组件进行通信。这种组件化设计使得 UI 开发更加模块化和可维护。

虚拟 DOM 和 Diff 算法

虚拟 DOM 是 React 最核心的概念之一。它是一个轻量级的 JavaScript 对象，代表了实际 DOM 树的结构和状态。React 在每次状态更新时都会创建一个新的虚拟 DOM，并通过 Diff 算法比较新旧虚拟 DOM 之间的差异，只更新实际 DOM 中发生改变的部分。

Diff 算法是一种高效的算法，它可以快速找出新旧虚拟 DOM 之间的差异，并生成一个最小的更新列表。这使得 React 能够只更新实际 DOM 中受影响的部分，从而大大提高了性能。

Fiber 架构

Fiber 是 React 在 v 16 引入的一个新架构，它对 React 的内部工作方式进行了重大的优化。Fiber 架构采用了基于优先级的任务调度机制，可以更好地利用 CPU 资源，并确保高优先级的任务首先被执行。

Fiber 是 React 中的基本工作单元，它代表了 UI 中的一个节点（元素）。Fiber 包含了有关该节点的所有信息，包括它的属性、子节点、状态等。React 通过 Fiber 架构来管理和更新 UI。

初次渲染流程

为了更好地理解 React 的工作原理，我们接下来将通过一个简单的例子来演示 React 的首次渲染流程。

假设我们有一个简单的 React 应用，它包含一个名为 MyComponent 的组件。MyComponent 组件的代码如下：

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
        <p>This is a simple React component.</p>
      </div>
    );
  }
}

当我们调用 ReactDOM.render() 方法将 MyComponent 组件渲染到 DOM 中时，React 将执行以下步骤：

创建 Fiber 树

React 首先会创建一个 Fiber 树，它代表了整个 UI 的结构。Fiber 树中的每个 Fiber 都对应着 UI 中的一个节点（元素）。在我们的例子中，Fiber 树如下所示：
```
Fiber Tree:
- MyComponent (Fiber)
  - div (Fiber)
    - h1 (Fiber)
      - Hello, World! (Text Fiber)
    - p (Fiber)
      - This is a simple React component. (Text Fiber)
```
调度更新

创建完 Fiber 树后，React 会调度一个更新。更新是一个包含了需要更新的 Fiber 列表的对象。在我们的例子中，更新对象如下所示：
```
Update:
- MyComponent (Fiber)
```
执行更新

React 会根据更新对象逐个更新 Fiber。在我们的例子中，React 会执行以下步骤：
- 创建一个真实的 DOM 节点，并将其添加到 DOM 树中。
- 更新 DOM 节点的属性和内容。
完成渲染

当 React 完成对所有受影响的 Fiber 的更新后，首次渲染就完成了。