【React】React渲染流程

1. JSX 转换

JSX 被 Babel 转换为 React.createElement 调用。生成一个 虚拟DOM 对象，描述组件的结构和内容。

2. 创建虚拟 DOM

React.createElement 调用返回一个 JavaScript 对象，表示 虚拟DOM 节点。这些节点被组织成一个树形结构。

3. 创建 Fiber 节点

每个 虚拟DOM 节点会被转换成一个 Fiber 对象。Fiber 对象是对虚拟 DOM 节点的一个增强版本，除了包含虚拟 DOM 节点的属性外，还包含额外的用于调度和调试的信息。

4. 渲染 Fiber 树

在「初次渲染」时，React 会将 Fiber 树转换为真实的 DOM 元素。Fiber 构建了一个“工作单元”的队列，负责处理渲染和更新操作。

5. 更新 Fiber 树

当组件的状态或属性发生变化时，React 会生成一个新的 Fiber 树。新的 Fiber 树与旧的 Fiber 树进行比较，找出差异。

6. 调度和协作渲染

React Fiber 支持调度和分片渲染。渲染过程可以被中断和恢复，以避免长时间阻塞主线程。Fiber 调度器可以将工作分割成多个任务，按优先级进行处理。
渲染过程可以在后台进行，允许 React 处理高优先级任务（如用户交互）并在空闲时继续处理低优先级任务（如更新大型列表）。

7. 生成真实dom

Fiber 使用 diffing 算法比较旧的 Fiber 树和新的 Fiber 树，生成一个更新补丁。这个补丁描述了需要对实际 DOM 进行的最小化更改操作。

React 将补丁应用到真实 DOM 上，包括插入、更新和删除 DOM 节点。