React Fiber 是 React 16 及以后版本中实现的一种新的协调算法，它的核心目的是支持异步渲染、增量渲染和可中断渲染。通过 Fiber，React 能够在渲染过程中暂停并继续处理高优先级的任务，从而提高了 UI 渲染的流畅性，尤其是在响应式应用中。
Fiber 的核心概念： 1. Fiber 节点：每个 React 组件都有一个对应的 Fiber 对象。Fiber 对象包含了关于组件的所有信息，比如组件的状态、生命周期、DOM 等。这些对象组成了 Fiber 树（Fiber Tree）。 2. Fiber 树：Fiber 树是 React 用来描述组件结构的树，类似于旧版 React 中的虚拟 DOM。不过与虚拟 DOM 不同，Fiber 树能处理复杂的更新任务和优先级调度。 3. 调度：Fiber 的调度器决定了哪些更新任务优先处理。它通过将任务分配到不同的优先级队列中来实现异步渲染。在高优先级任务到来时，React 会暂停当前渲染，处理高优先级任务，再回到原任务继续渲染。 4. 任务拆分：Fiber 将渲染过程拆分成小的单元，这些小单元称为“工作单元”（Work Units）。每个工作单元会有自己的状态和对应的更新任务。通过这种方式，React 可以在执行过程中暂停工作，保证 UI 响应性。
Fiber 的流程： 1. 创建 Fiber 树：React 渲染一个组件时，会为每个组件创建一个 Fiber 对象，并将其连接成树状结构。这些 Fiber 对象包含了组件的状态、props 和其他重要信息。 2. 渲染阶段： • 协调阶段（Reconciliation）：React 会计算每个组件的更新，根据组件的状态和 props 来决定如何更新。这个过程通过比较新旧 Fiber 树来进行（类似旧版的虚拟 DOM diff）。 • 提交阶段（Commit Phase）：一旦协调阶段完成，React 会执行实际的 DOM 更新操作，将变化反映到屏幕上。 3. 优先级调度：Fiber 的调度器会根据任务的优先级将更新分配到不同的队列中。例如，用户交互的更新（如输入框变化）会有更高的优先级，而非紧急的更新（如动画）可能会被延迟。 4. 可中断渲染：React Fiber 支持异步渲染。在渲染过程中，如果有更高优先级的任务（比如用户输入、动画等）需要处理，React 可以暂停当前任务，处理高优先级任务，然后继续当前任务。这是通过将渲染过程拆分为多个小的“工作单元”来实现的。
Fiber 解决的问题： 1. 可中断的渲染：旧版的 React 在渲染过程中是同步的，如果渲染过程很长，页面就会卡顿。Fiber 通过将渲染过程分解成多个小任务，并能在任务间暂停，使得渲染过程可以被中断，从而提升了 UI 的响应速度。 2. 优先级调度：Fiber 支持任务的优先级调度，确保重要的任务优先完成。例如，用户输入的更新可以高优先级处理，而不重要的更新（如某些动画）则可以延迟执行。 3. 异步渲染：通过将任务拆分成多个片段，React 可以异步地渲染 UI。这样即使任务非常多，React 也能保持流畅的用户体验，避免页面冻结。
面试中的常见问题： 1. Fiber 和虚拟 DOM 有什么区别？ • 虚拟 DOM 是一种简单的树结构，用来描述 UI。Fiber 是虚拟 DOM 的改进版，它引入了优先级调度和任务拆分，能够支持异步渲染和中断渲染。 2. React Fiber 如何处理异步渲染？ • React Fiber 将渲染过程拆分为多个工作单元（Work Units），每个工作单元都可以在异步的环境下执行。通过调度器，React 可以暂停低优先级任务，处理高优先级任务，保证 UI 响应性。 3. 为什么 Fiber 能实现可中断的渲染？ • Fiber 通过将渲染过程分解成小的“工作单元”，每个单元都包含了组件的状态和更新信息。渲染过程中，React 可以检查是否有更高优先级的任务需要执行，如果有，它可以暂停当前渲染，优先处理高优先级任务。
