React16如何支持异步可中断更新?

5 min read

React16 支持异步可中断更新，可以通过 React Fiber 架构实现。React Fiber 通过将渲染工作分成一小段一小段的单元，形成一个纤程链，可以在任意时刻中断、恢复和优先执行某些任务来提高渲染效率。

React Fiber 架构包含以下概念：

  • Fiber：每一个 Component 在 React Fiber 中都有一个对应的 Fiber 对象，Fiber 对象中保存了该 Component 的状态和对应的 DOM 节点信息，以及协调更新的信息。
  • Scheduler：React Fiber 的调度器，负责协调总体的渲染进度，以及管理 Fiber 的执行顺序。
  • WorkInProgress（WIP）：表示正在进行的任务，在 React Fiber 中表现为一个 Fiber 的链表。Scheduler 会不断从 WIP 链表中取出一个任务进行执行，直到任务执行完毕，或者优先级变更，需要重新调度。
  • FiberRoot：表示整个渲染树的根节点，每个 FiberRoot 对象都会有一个对应的 WIP 链表以及 Scheduler。

异步可中断渲染的实现流程如下：

  1. 在组件内部，通过调用 scheduleWork 函数向 Scheduler 中添加一项工作。
  2. Scheduler 将新添加的工作创建为一个 Fiber 对象，加入对应 WIP 链表中。
  3. Scheduler 根据一定的调度策略，从 WIP 链表中选择一个任务进行执行，并将该任务标记为正在执行状态。
  4. 当前任务需要中断时，Scheduler 会暂停当前任务的执行，将当前任务的 Fiber 对象标记为未完成状态，并将该任务放回 WIP 链表末尾，等待后续调度重新执行。
  5. 当有更高优先级的任务需要执行时，Scheduler 会优先执行该任务，即将更高优先级的任务插入到 WIP 链表的头部，等待下一次调度。
  6. 当任务执行完毕后，Scheduler 标记该任务为已完成状态，并将 WIP 链表头部的任务取出进行执行，循环执行以上流程直到 WIP 链表为空。