V8程序

Appearance

什么是 React Fiber 架构？ ​

React Fiber 是 React 在 16 版本引入的一种新的内部重构机制，旨在解决 React 在处理复杂和大型应用时面临的一些性能问题，尤其是渲染和更新界面的过程。React Fiber 架构使得 React 能够控制和优化更新过程，并通过“增量渲染”来提升用户体验。

一、为什么需要 Fiber？ ​

在 React 15 及之前的版本中，React 的渲染和更新过程是同步的，也就是说，一旦更新开始，React 会一次性完成整个组件树的渲染工作，无法中断。如果组件树特别庞大或者更新的工作量很大，可能会导致阻塞，这就会出现掉帧和UI 卡顿的问题，特别是在动画、用户输入等需要高响应性的时候。

为了解决这个问题，React Fiber 引入了一个新的架构，允许更新过程可被中断、拆分，从而提升应用的响应性。

二、React Fiber 的目标 ​

  1. 可中断的渲染：通过分阶段处理渲染工作，使得 React 可以在必要时暂停低优先级的任务，处理用户交互等高优先级任务，避免卡顿。
  2. 优先级调度：根据任务的重要性、时间紧迫性等信息对任务进行优先级排序，优先处理高优先级任务（如用户输入）。
  3. 增量渲染：通过分批执行工作，允许 React 将渲染工作分为小块，确保不会长时间占用主线程资源，避免掉帧。
  4. 一致性保持：即使任务可以被拆分和中断，React 仍能确保在最终渲染时保持 UI 的一致性和正确性。

二、Fiber 架构的核心概念 ​

React Fiber 的工作机制分为两个阶段：

  1. 调度阶段（Reconciliation / Render Phase）：计算需要更新的内容。
  2. 提交阶段（Commit Phase）：将更新应用到实际的 DOM 上。

这两个阶段的不同点在于：

  • 调度阶段是可中断的：React Fiber 可以将工作分为多个小单元并安排优先级，这样可以在渲染大组件树时暂停工作并响应更紧急的任务（如用户输入）。
  • 提交阶段是不可中断的：一旦 Fiber 计算出了需要更新的内容，它就会在提交阶段将这些更新应用到 DOM 中。这一阶段需要同步执行，因为我们希望尽快让用户看到最终的渲染结果。

三、Fiber 树结构 ​

React Fiber 将组件树转化为一个类似链表的结构，称为 Fiber 树。每个组件对应一个 Fiber 节点，每个 Fiber 节点包含如下重要信息：

  • type: 当前节点代表的组件类型（类组件、函数组件、DOM 元素等）。
  • key: 唯一标识此 Fiber 节点的 key，通常用于处理列表。
  • pendingProps: 当前组件新的 props。
  • memoizedProps: 上一次渲染时的 props，用于比较是否需要更新。
  • memoizedState: 上一次渲染时的 state，类似于 props 的比较机制。
  • alternate: 指向另一个 Fiber 节点的引用，React 使用它来保留前一个版本的 Fiber，帮助完成对比和更新。

通过这种数据结构，React Fiber 可以高效地比较新旧虚拟 DOM 树，找到变化并更新最少的部分。

四、调度阶段（Render Phase） ​

在 Fiber 架构下，React 将渲染工作拆分成很多个小任务单元，这些任务被称为 Fiber 单元。每个 Fiber 节点代表组件树中的一个单元，它可能是一个 DOM 元素或者一个 React 组件。React Fiber 会逐一遍历这些 Fiber 节点，计算需要的更新。

  • 可中断的任务：调度阶段是可以被打断的。如果 React 检测到有更高优先级的任务（如用户输入、动画等），它会暂停当前的调度任务，并优先处理高优先级任务。
  • 优先级调度：在调度阶段，React 会根据任务的重要性进行优先级排序。不同的更新任务有不同的优先级。例如，用户的输入、点击事件等具有高优先级，而动画、布局等任务可能具有较低优先级。

Fiber 为每个任务分配了不同的优先级：

  • 同步优先级：某些操作必须立即完成，比如 setState 触发的状态更新。
  • 中等优先级：动画和用户输入等操作需要及时响应。
  • 低优先级：后台任务或非用户感知的操作可以推迟执行。

React Fiber 的渲染任务基于这些优先级来确定执行的顺序，从而让 React 能够在高负载的应用场景下保持流畅。

如何打断和恢复任务？ ​

当 Fiber 检测到有更紧急的任务时，它可以暂停当前的调度任务，并保存当前任务的执行状态。待高优先级任务完成后，React 可以从之前暂停的地方恢复渲染工作。

这种打断和恢复的机制类似于 JavaScript 中的 协程（Coroutine），通过调度器让 Fiber 可以随时暂停和恢复。

五、提交阶段（Commit Phase） ​

一旦 Fiber 计算完所有的更新，它就进入了提交阶段。提交阶段的主要任务是将 Fiber 树的变化应用到真实的 DOM 中。

提交阶段分为三个子阶段：

  1. before mutation phase：在任何 DOM 更新之前，执行某些生命周期方法，比如 getSnapshotBeforeUpdate，或者 useEffect 中的清理操作。
  2. mutation phase：将计算出的变化应用到真实 DOM 中，更新 DOM 属性、插入或删除元素。
  3. layout phase：DOM 更新完成后，执行一些与布局相关的副作用，比如调用 componentDidMount 或 useEffect。

**注意：**提交阶段是同步的，不能被打断的。因为一旦我们开始修改真实的 DOM，React 希望尽快完成这一过程，以保持界面的一致性和用户的体验。

六、Fiber 的优先级调度策略 ​

Fiber 通过调度器（Scheduler）进行优先级管理，确保任务的执行顺序符合应用的需求。

调度器有几个关键概念：

  • 任务队列（Task Queue）：所有的渲染任务都会被放入一个任务队列中，每个任务有一个优先级（expirationTime）。
  • 工作单元（Work Unit）：Fiber 会逐个执行任务队列中的工作单元，每个工作单元是一个 Fiber 节点的更新任务。
  • 帧（Frame）：浏览器每一帧大约为 16ms，React Fiber 会在每帧中执行若干个工作单元，并检查是否有高优先级任务。如果有，Fiber 会暂停低优先级任务，并优先处理高优先级的任务。

这种优先级调度策略使得 React 能够在渲染过程中分配资源，避免在处理大量任务时卡住主线程。

七、Fiber 的其他优势 ​

  1. 更精细的控制权：React 可以在更新时拥有更细粒度的控制，可以在渲染过程中处理动画、用户输入等任务，提高应用的流畅度和用户体验。
  2. 并发模式：通过 Fiber 架构，React 也能够支持未来的 并发模式（Concurrent Mode），该模式允许 React 更好地调度高优先级任务，并提前渲染低优先级的任务。
  3. 增量更新：React 不再一次性完成所有更新，而是可以增量地进行，这对于大型应用来说极为重要。

八、总结 ​

React Fiber 是一种全新的架构，它的主要目标是通过 可中断的渲染 和 优先级调度 来解决 React 在大型应用中的性能瓶颈问题。Fiber 的引入让 React 能够：

  • 处理复杂的渲染场景：即使在复杂的应用中，React 也能保持 UI 更新的流畅性。
  • 分割渲染工作：通过将任务拆分成小块并逐步执行，Fiber 避免了大任务长时间占用主线程。
  • 支持异步渲染：通过 Fiber，React 可以处理异步渲染，并为未来的并发模式打下基础。

Fiber 架构为 React 提供了更强大的调度能力，使得 React 能够在复杂的应用场景中保持高效、流畅的用户体验。