React Fiber 如何实现更新过程的可控

小小小小宇
316 阅读5分钟

React Fiber 通过一系列机制实现了更新过程的可控性，核心在于 可中断的渲染 (Interruptible Rendering) 和 优先级调度 (Priority Scheduling)。 下面详细解释这些机制：

1. 可中断的渲染 (Interruptible Rendering):

  • 背景： React 之前的渲染机制是同步的，一旦开始渲染，就会一直执行，直到整个组件树都更新完成。这会导致以下问题：

    • UI 阻塞： 长时间的渲染会阻塞主线程，导致 UI 无法响应用户交互，造成卡顿。
    • 无法优先处理紧急更新： 如果此时有高优先级（例如用户输入）的更新，也必须等待当前渲染完成才能处理，无法及时响应用户的操作。

  • Fiber 的解决方案：

    • 将更新分解为一个个工作单元 (Unit of Work): Fiber 将整个组件树的更新过程分解为一个个小的、独立的单元，每个单元对应一个组件或一小部分组件的更新。
    • 使用链表结构 (Fiber Node): 每个工作单元都对应一个 Fiber Node，它包含了组件的状态、更新信息、以及指向其他 Fiber Node 的指针（如 child、sibling、return）。 这些指针构成了一棵 Fiber 树，用于描述组件树的结构。
    • 可中断的循环 (Work Loop): React Fiber 引入了一个循环，用于遍历 Fiber 树，执行每个 Fiber 对应的工作单元。 与旧的同步渲染不同，这个循环是可中断的。 这意味着：
      • 检测时间片 (Time Slicing): 在每次执行完一个工作单元后，Fiber 会检查是否有时间片（例如浏览器空闲时间）剩余。
      • 检查优先级： Fiber 会比较当前 Fiber 的优先级与更高优先级的更新。
      • 暂停/恢复渲染 (Pause/Resume):
        • 如果时间片耗尽，或有更高优先级的更新到来，Fiber 会暂停当前的渲染工作。 它会保存当前的进度，并把控制权交回给浏览器。
        • 当浏览器空闲或更高优先级的更新完成后，Fiber 可以恢复之前的渲染工作，从上次暂停的地方继续。

2. 优先级调度 (Priority Scheduling):

  • 背景： 不同的更新有不同的重要性。 例如，用户输入通常比后天数据更新更重要。

  • Fiber 的解决方案：

    • 优先级系统： React Fiber 引入了一个基于优先级的调度系统，为不同的更新分配不同的优先级。 常见的优先级包括：
      • Sync: 同步更新，最高优先级，例如用户输入。
      • Task: 任务，例如动画。
      • UserBlocking: 用户阻塞，例如用户点击。
      • Normal: 普通，例如网络请求返回更新数据。
      • Low: 低优先级，例如后天数据更新。
      • Idle: 空闲，最低优先级，例如离屏渲染。
    • 调度算法： Fiber 使用调度算法来决定何时执行哪些更新。 通常是基于优先级和剩余时间片的。
      • 高优先级优先： 更高优先级的更新会优先处理。
      • 时间切片： 在同一个优先级内，React 会尽量利用浏览器空闲时间来执行低优先级更新。
      • 抢占 (Preemption): 如果一个低优先级的更新正在进行，但来了高优先级的更新，Fiber 可以抢占当前的更新，先处理高优先级的，然后再恢复低优先级更新。

3. 具体更新流程 (简要):

  1. 发起更新 (e.g., setState): 当调用 setState 等更新方法时，React 会创建一个或多个 Fiber Node (或复用已存在的 Fiber Node), 标记为需要更新。
  2. 构建 Fiber 树 (Reconciliation): Fiber 开始构建 Fiber 树。
    • Diff 算法： 使用 Virtual DOM 的 diff 算法（或者使用优化后的算法，在 Fiber 中有多种优化）来对比旧的 Virtual DOM (或者说旧的 Fiber 树) 和新的 Virtual DOM（或者说基于更新后的状态创建的新的 Fiber 树)。
    • 标记更新： 标记需要更新的 Fiber Node (称为 “Effect List”)。
  3. 调度 (Scheduling): 根据更新的类型（优先级），将更新加入到调度队列中。
  4. 渲染阶段 (Render Phase/Reconciliation Phase):
    • Fiber 开始遍历 Fiber 树。
    • 执行工作单元 (Work Unit): 对于需要更新的 Fiber Node，执行其对应的工作单元。 工作单元主要包括：
      • 计算新的 Virtual DOM: 执行组件的 render 方法，得到新的 Virtual DOM。
      • Diff 算法： 对比新的 Virtual DOM 和旧的 Virtual DOM，找出需要更新的 DOM 节点和属性。
      • 更新 effectTag: 在 Fiber Node 上设置 effectTag 来标记需要执行的操作（例如：PLACEMENT (插入DOM), UPDATE (更新DOM), DELETION (删除DOM) 等）。
    • 可中断： 在每次处理完一个 Fiber Node 后，检查时间片和优先级，决定是否暂停渲染。
  5. 提交阶段 (Commit Phase):
    • 执行 DOM 操作 (Side Effects): 遍历 effect list ，根据 effectTag 执行具体的 DOM 操作（例如，创建、更新、删除 DOM 节点）。 这个阶段是同步的，尽量快速完成。
    • 调用生命周期方法： 调用生命周期方法（如 componentDidMount、componentDidUpdate、componentWillUnmount 等）。
  6. 更新完成： 更新完成，Fiber 树更新为最新状态。

总结:

React Fiber 通过 可中断的渲染 和 优先级调度 实现了对更新过程的精确控制。这使得 React 能够：

  • 提升用户体验： 减少 UI 阻塞，及时响应用户交互。
  • 提高性能： 更有效地利用浏览器资源，避免不必要的渲染。
  • 更灵活的更新策略： 根据更新的优先级进行调度，确保重要更新优先处理。
  • 更好的可维护性： Fiber 架构更易于优化和扩展。

总而言之， React Fiber 并非一种全新的渲染方式，而是一种重构，通过改变调度算法和工作单元，为 React 提供了更强的控制能力，使得它可以更高效地处理更新，并提供更流畅的用户体验。

avatar
文章
阅读
粉丝