React element与current Fiber与 workInProgress Fiber 三者之间有什么关系

在 React 中，React Element 和 Fiber 树（包括 current Fiber 和 workInProgress Fiber） 是核心概念，它们之间的关系如下：

1. 核心关系概述

React Element 是描述 UI 的对象：
- 是 React 中构建 UI 的基础单元。
- 由 JSX 转换而来，表示组件或 DOM 节点的结构和属性。
Fiber 是 React 内部实现的单元：
- 用于表示一个可调度的任务单元，与 React Element 对应。
- 每个 Fiber 节点存储着与 React Element 相关的信息（如 type 和 props），以及渲染、调度和更新所需的其他信息。
current Fiber 和 workInProgress Fiber 是 Fiber 的两种状态：
- current Fiber： 表示页面上已渲染的状态。
- workInProgress Fiber： 表示 React 在更新过程中构建的新状态。

2. React Element 与 Fiber 的关联

创建 Fiber 树

初次渲染时，React 会根据 React Element 创建对应的 Fiber 节点：
- React.createElement 创建的 React Element 会作为 element 输入。
- React 调用内部的 createFiber 函数，将 React Element 转换为 Fiber 节点。

示例代码：

const element = <div className="container">Hello</div>;

生成的 Fiber 节点结构：

{
  "type": "div",               // 对应 React Element 的 type
  "pendingProps": { "className": "container" }, // React Element 的 props
  "child": { ... },            // 子 Fiber 节点
  "return": null,              // 父 Fiber 节点
  "stateNode": DOM节点或组件实例 // 对应的真实 DOM 节点
}

更新 Fiber 树

Render 阶段：
- React 将新的 React Element 与 current Fiber 对比。
- 如果类型和 key 一致，复用 current Fiber，生成新的 workInProgress Fiber。
- 如果类型或 key 不一致，标记旧 Fiber 为删除，创建新的 Fiber。

3. current Fiber 和 workInProgress Fiber 的关联

初次渲染：

只有 workInProgress Fiber 存在，没有 current Fiber。
Fiber 树构建完成后，workInProgress Fiber 会成为 current Fiber。

后续更新：

React 在更新时会：
1. 从 current Fiber 开始，根据新的 React Element 构建或复用 workInProgress Fiber。
2. 更新完成后，workInProgress Fiber 替换 current Fiber。

// 更新过程中的关系
current Fiber <-> workInProgress Fiber <-> React Element

4. 具体的关系细节

React Element 提供更新依据

React Element 描述新的 UI 状态。
React 使用 React Element 提供的 type 和 key，与 current Fiber 对比，以确定是否需要更新。

Fiber 节点存储状态和关联对象

Fiber 节点除了 type 和 props，还维护了以下信息：
- stateNode： DOM 节点或组件实例。
- return： 指向父节点的指针。
- effectTag： 描述需要执行的操作（如新增、删除、更新等）。
- alternate： 关联 current Fiber 和 workInProgress Fiber 的双向指针。

5. 图解：React Element 和 Fiber 的关系

初次渲染

React Element ----> Fiber Tree ----> DOM Tree

更新过程

React Element ---> [Diffing] ---> workInProgress Fiber Tree
                     ↑                      ↓
               current Fiber Tree     更新 DOM Tree

6. 示例：关系分析

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
}

初次渲染：
- React 通过 React.createElement 生成 React Element 树。
- React 创建 Fiber 树，workInProgress Fiber 成为 current Fiber。
更新时：
- 新的 React Element 与 current Fiber 对比。
- 如果 <h1> 和 <p> 的类型和 key 不变，React 复用对应的 Fiber 节点，更新 props。

总结：React Element 与 Fiber 的关系

React Element 是 UI 的描述对象。
- Fiber 树是 React 的内部表示，与 React Element 一一对应。
current Fiber 和 workInProgress Fiber 是 Fiber 树的两种状态。
- current Fiber 表示已渲染的旧状态。
- workInProgress Fiber 是根据新的 React Element 生成的待更新状态。
React 使用 React Element 提供的新状态和 Fiber 树的旧状态完成高效更新。