React源代码解读（三）：4000字告诉你 Fiber 初始化

React源代码解读（三）：4000字告诉你 Fiber 初始化

回顾 JSX 的渲染过程

在上一章中，我们了解到 ReactDOM.render() 会触发 React 的渲染过程，但我们还没有深入研究它是如何工作的。让我们先回顾一下 JSX 的渲染过程，以便更好地理解 Fiber 的初始化过程。

当我们使用 JSX 编写组件时，React 会将 JSX 编译成 JavaScript 代码。编译后的代码本质上是一个函数，它接受一个 props 对象作为参数，并返回一个 React 元素对象。React 元素对象是一个轻量级的对象，它包含组件的类型和 props。

React 会将 React 元素对象传递给 ReactDOM.render() 函数，后者会将其挂载到 DOM 中。挂载过程包括以下几个步骤：

1. React 会创建一个 Fiber 节点来表示 React 元素对象。
2. React 会根据 Fiber 节点的类型和 props，创建一个真实 DOM 节点。
3. React 会将真实 DOM 节点插入到父元素中。

Fiber 的初始化

Fiber 是 React 在 16 版本中引入的新概念。Fiber 是一个轻量级的对象，它包含了组件的状态、props 和生命周期方法等信息。Fiber 的引入使 React 的渲染过程更加高效，因为它可以增量地更新组件，而无需重新渲染整个组件树。

Fiber 的初始化过程如下：

1. React 会创建一个 Fiber 节点来表示 React 元素对象。
2. React 会根据 Fiber 节点的类型和 props，创建一个真实 DOM 节点。
3. React 会将真实 DOM 节点插入到父元素中。
4. React 会为 Fiber 节点创建一个 effect tag，它表示该 Fiber 节点需要执行的操作。
5. React 会将 Fiber 节点添加到 effect list 中。

Effect list

Effect list 是一个链表，它包含需要执行的操作的 Fiber 节点。React 会在渲染过程的最后遍历 effect list，并执行每个 Fiber 节点的操作。

Effect list 中的操作包括：

• 创建真实 DOM 节点
• 更新真实 DOM 节点
• 删除真实 DOM 节点

Fiber 的工作原理

Fiber 的工作原理如下：

1. React 会创建一个 Fiber 节点来表示 React 元素对象。
2. React 会根据 Fiber 节点的类型和 props，创建一个真实 DOM 节点。
3. React 会将真实 DOM 节点插入到父元素中。
4. React 会为 Fiber 节点创建一个 effect tag，它表示该 Fiber 节点需要执行的操作。
5. React 会将 Fiber 节点添加到 effect list 中。
6. React 会在渲染过程的最后遍历 effect list，并执行每个 Fiber 节点的操作。

Fiber 的引入使 React 的渲染过程更加高效，因为它可以增量地更新组件，而无需重新渲染整个组件树。