[fiber系列]filer树和虚拟dom树是如何协作的？

React中的Fiber树和虚拟DOM树紧密协作，以高效地管理和更新用户界面。以下是两者之间的关系以及它们如何协作的详细说明：

虚拟DOM树

虚拟DOM树是React用来表示UI结构的树。每个虚拟DOM节点（VNode）对应一个React元素，描述了界面的一部分。虚拟DOM树的作用是：

1. 描述UI结构：每个VNode包含了组件的类型、属性、子节点等信息。
2. 比较新旧树：在更新时，React会创建新的虚拟DOM树，并与当前的虚拟DOM树进行比较，找出变化部分。
3. 生成更新指令：根据比较结果，生成需要应用到实际DOM上的更新指令。

Fiber树

Fiber树是React在协调和更新过程中使用的数据结构。每个Fiber节点（Fiber）表示一个工作单元，包含了虚拟DOM节点的相关信息以及额外的调度和状态信息。Fiber树的作用是：

1. 管理更新任务：Fiber节点保存了组件的当前状态和需要更新的信息，可以高效地管理和调度更新任务。
2. 分片和优先级调度：将大的更新任务分解为小的工作单元，并根据优先级进行调度，确保高优先级任务优先处理。
3. 双缓存机制：在“work-in-progress tree”上进行操作，完成后与“current tree”切换。

两者如何协作

1. 初次渲染：

   • React通过虚拟DOM树创建初始的Fiber树。
   • Fiber树根据虚拟DOM树的信息，生成实际的DOM元素并挂载到页面上。

2. 更新过程：

   1. 触发更新：

      • 当状态或属性改变时，React会创建一个新的虚拟DOM树。

   2. 协调阶段（Reconciliation Phase）：

      • 在这个阶段，React会根据新的虚拟DOM树和当前的Fiber树，生成一个新的“work-in-progress” Fiber树。
      • 比较新旧虚拟DOM树，找出变化的部分，并在新的Fiber树上记录需要更新的信息。
      • 这个过程是增量的和可中断的，React可以在需要时暂停更新，以响应高优先级任务。

   3. 生成新的Fiber树：

      • 新的Fiber树包含了最新的UI状态以及更新的指令。
      • 每个Fiber节点对应一个虚拟DOM节点，并包含了新的props和state。

   4. 提交阶段（Commit Phase）：

      • 在协调阶段完成后，React会进入提交阶段，将变化应用到实际的DOM上。
      • 这个阶段是同步的，不可中断。
      • React遍历新的Fiber树，根据需要的更新指令，进行DOM操作（插入、删除、更新节点）。

具体步骤

• 创建Fiber树：从虚拟DOM节点开始，创建Fiber节点，形成初始的Fiber树。
• 更新Fiber树：当有状态或属性变化时，通过新的虚拟DOM树，更新对应的Fiber树，生成新的Fiber节点，并比较新旧Fiber树，找出变化。
• 应用更新：将Fiber树中的变化应用到实际的DOM上，完成更新。

通过这种方式，Fiber树和虚拟DOM树协作，实现了高效、灵活的UI更新管理，确保React应用能够提供流畅的用户体验。