Fiber 架构

在引入 Fiber 架构之前，大型 React 应用更新一次会遍历大量虚拟 DOM，导致卡顿。React 重写了核心模块 Reconciler ，启用了 Fiber 架构。Fiber 架构是 React 在性能和功能上的重大升级，使其更适合构建大型、复杂的现代应用。

Fiber 架构是 React 16 引入的一种新的协调引擎，通过将渲染工作分解成可中断的小任务，实现了增量渲染和优先级调度。React 使用 Fiber 的主要原因包括：

• 提高响应性：确保用户交互流畅，避免卡顿。
• 支持并发渲染：为并发模式提供基础，提升性能。
• 优化渲染性能：通过增量渲染和节点复用减少耗时。
• 支持新特性：如错误边界和 Suspense，提升开发体验。

什么是 Fiber 架构？

Fiber 是 React 16 引入的一种新的协调（Reconciliation）引擎，它是 React 内部用来管理组件树的一种数据结构。简单来说，Fiber 是一个轻量级的、可中断的任务单元，每个 Fiber 节点对应 React 组件树中的一个节点（可以是组件、DOM 元素等）。这些 Fiber 节点通过链表结构连接，形成一棵 Fiber 树。

每个 Fiber 节点包含以下关键信息：

• 组件的类型（如函数组件或类组件）、props 和 state。
• 副作用标记（effect tag），用于标识需要执行的更新操作。
• 指向父节点、子节点和兄弟节点的指针。

Fiber 架构的核心特性是可中断和增量渲染。它将渲染工作分解成多个小任务单元，React 可以在必要时暂停这些任务，处理更高优先级的工作（如用户输入），然后再恢复渲染。这种机制大大提高了应用的响应性和流畅性。

为什么使用 Fiber 架构？

React 采用 Fiber 架构主要是为了解决旧架构的局限性，并带来性能和功能的提升。以下是具体原因：

1. 提高应用的响应性

在 React 15 及之前的版本中，渲染过程是同步的，一旦开始就无法中断。如果渲染任务耗时较长（例如处理复杂的组件树或大数据量），主线程会被占用，导致用户界面卡顿，用户交互（如点击、输入）无法及时响应。

Fiber 架构通过将渲染分解成多个小任务，并在任务之间检查是否有更高优先级的操作需要处理（例如用户输入）。如果有，React 会暂停渲染，先处理高优先级任务，然后再继续渲染。这种方式确保了用户交互的流畅性。

2. 支持并发渲染

Fiber 架构为 React 的 并发模式（Concurrent Mode） 奠定了基础。并发模式允许 React 在渲染过程中同时处理多个任务，例如在后台准备新的 UI，同时响应用户交互。这显著提升了应用的性能和用户体验，尤其是在复杂应用场景中。

3. 优化渲染性能

Fiber 架构通过以下方式优化了渲染性能：

• 增量渲染：渲染工作被分成多个小块，逐步完成，而不是一次性渲染整个组件树。
• 优先级调度：React 可以根据任务的优先级（如动画、用户输入等）调度渲染，确保高优先级任务优先执行。
• 复用 Fiber 节点：在更新时，React 可以复用之前的 Fiber 节点，减少内存分配和垃圾回收的开销。

4. 支持新的特性

Fiber 架构为 React 引入了一些重要的新功能：

• 错误边界（Error Boundaries）：Fiber 使得 React 能更好地捕获和处理组件树中的错误，提升应用的健壮性。
• Suspense：Fiber 支持 Suspense 功能，允许组件在数据加载时显示占位符，从而优化用户体验。

Fiber 与旧架构的对比

在 React 15 及之前，React 使用的是 堆栈协调（Stack Reconciler） 架构，其特点是同步渲染和深度优先遍历。这种方式在组件树较大或任务复杂时，容易导致主线程被长时间占用，影响响应性。而 Fiber 架构通过链表结构、可中断的任务和增量渲染，克服了这些问题，成为 React 性能优化的重要里程碑。

React 的调度策略

React 的调度策略是指 React 如何管理和执行任务，以确保应用具有高性能和良好的响应性。

React 的调度策略通过优先级机制和时间切片技术，将任务分解并合理安排执行顺序，实现了任务的高效管理和执行。其核心目标是提升应用的响应性和性能，确保关键任务优先完成，同时兼顾低优先级任务的处理。

核心概念

React 的调度策略基于几个关键概念：

• 任务（Task）：React 将渲染工作拆分成多个小的任务单元，例如更新组件、处理副作用等。
• 优先级（Priority）：每个任务都被赋予一个优先级，React 根据优先级决定任务的执行顺序。
• 调度器（Scheduler）：React 使用调度器来管理任务队列，动态决定何时执行哪个任务。
• 时间切片（Time Slicing）：React 将任务分成小块，在每个时间切片内执行一部分，然后检查是否有更高优先级的任务需要插队。

优先级机制

React 定义了多种优先级级别，用于区分任务的紧急程度。常见的优先级从高到低包括：

1. Immediate（立即执行）：最高优先级，用于必须立即响应的任务，例如用户输入。
2. UserBlocking（用户阻塞）：用于需要快速响应的任务，例如点击事件的处理。
3. Normal（正常）：适用于大多数常规更新任务，例如数据获取后的界面刷新。
4. Low（低）：用于不紧急的任务，例如后台数据同步。
5. Idle（空闲）：最低优先级，用于空闲时执行的任务，例如预加载资源。

React 根据任务的优先级，将其放入不同的队列，调度器会优先处理高优先级任务，确保用户交互等关键操作能够迅速响应。

调度流程

React 的调度过程可以分为以下几个步骤：

1. 任务创建
   当组件的状态或 props 发生变化时，React 会生成一个更新任务。根据触发更新的原因（如用户交互或数据加载），React 为任务分配相应的优先级。
2. 任务调度
   调度器接管任务队列，根据优先级和当前应用状态决定任务的执行时机。通过时间切片技术，React 在每个时间切片内完成一部分工作，并随时检查是否有更高优先级的任务需要优先处理。
3. 任务执行
   在渲染阶段，React 执行任务，生成新的 Fiber 树并进行 Diffing。如果有更高优先级的任务进入，React 会中断当前任务，优先处理新任务。任务完成后，进入提交阶段，将更新应用到 DOM。
4. 任务恢复
   如果任务被中断，React 会记录当前进度，并在合适的时机恢复执行。这种机制保证了高优先级任务的及时响应，同时低优先级任务也能逐步完成。

调度策略的优势

• 响应性强：高优先级任务能够快速执行，避免卡顿。
• 性能优化：通过时间切片和任务中断，React 可以高效处理复杂渲染任务，同时保持用户体验。
• 灵活性高：开发者可以通过特定 API（如 React.unstable_scheduleCallback）手动调整任务优先级和执行时机。

实际应用场景

React 的调度策略在以下场景中发挥了重要作用：

• 并发模式（Concurrent Mode）：React 18 引入的并发模式通过 <Suspense> 和 useTransition 等 API，利用调度策略提升性能和用户体验。
• 懒加载与代码分割：React 可以在空闲时加载非关键资源，优化应用的初始加载速度。
• 动画效果：调度策略确保动画任务获得高优先级，保证流畅的视觉体验。

React 的渲染流程

React 的渲染流程主要分为两个阶段：渲染阶段（Render Phase） 和 提交阶段（Commit Phase）。涵盖从状态更新到 DOM 更新的全过程。

• 渲染阶段生成虚拟 DOM 树并进行比较
• 提交阶段将更新同步应用到实际 DOM

React 的渲染流程通过 Fiber 架构（React 16 及以上版本引入）得以优化，使得渲染任务可以被中断和恢复，从而提升应用的响应性。

渲染阶段

渲染阶段是 React 生成新的虚拟 DOM 树并与旧的虚拟 DOM 树进行比较的过程，目的是确定需要更新的部分。

1.1 触发渲染

渲染通常由以下情况触发：

• 初次渲染：组件首次挂载到页面时。
• 状态更新：通过 setState（类组件）或 useState/useReducer（函数组件）更新状态。
• Props 更新：父组件传递的 props 发生变化。
• Context 更新：Context 的值发生变化。

1.2 生成新的虚拟 DOM 树

• React 会根据组件的最新状态和 props，重新执行组件的渲染函数，生成一棵新的虚拟 DOM 树。
• 在 Fiber 架构中，React 维护一棵 Fiber 树，每个 Fiber 节点对应一个组件实例或 DOM 元素。渲染阶段会创建一棵新的 Fiber 树（称为“WIP Fiber 树”）。

1.3 Diffing 算法

• React 通过 Diffing 算法 比较新旧虚拟 DOM 树，找出需要更新的部分。
• Diffing 规则：
  • 不同类型的元素：如果新旧节点的类型不同，React 会销毁旧节点并创建新节点。
  • 相同类型的元素：React 会复用旧节点，仅更新变化的属性。
  • 列表中的元素：React 使用 key 属性优化列表项的比较和更新。

1.4 生成更新队列

在 Diffing 过程中，React 会记录需要更新的部分，生成一个 更新队列（Effect List），包含 DOM 操作、生命周期方法或 Hooks 等副作用。

提交阶段

提交阶段是 React 将渲染阶段的更新应用到实际 DOM 的过程。这一阶段是同步执行的，不可中断，以确保 DOM 的一致性。

2.1 执行副作用

• DOM 更新：根据更新队列，React 执行实际的 DOM 操作（如创建、更新或删除节点）。
• 生命周期方法：
  • 类组件：执行 componentDidMount（初次渲染）、componentDidUpdate（更新后）、componentWillUnmount（卸载前）等。
  • 函数组件：执行 useEffect 或 useLayoutEffect 等 Hooks。
• Refs 更新：更新 refs 以指向新的 DOM 节点。

2.2 更新 Fiber 树

提交阶段完成后，新的 WIP Fiber 树成为当前的 Fiber 树，为下一次渲染做好准备。

详细步骤分解

以下是 React 渲染流程的具体步骤：

1. 触发渲染：例如，通过 setState 更新状态。
2. 调度更新：React 将更新任务加入调度队列，并根据优先级（如交互事件优先于数据更新）决定执行顺序。
3. 渲染阶段开始：
   • 从根组件开始，递归执行渲染函数，创建 WIP Fiber 树。
   • 生成新的虚拟 DOM 树。
4. Diffing：比较新旧 Fiber 节点，标记需要更新的部分。
5. 生成 Effect List：记录需要执行的副作用。
6. 提交阶段开始：
   • 同步执行 Effect List 中的 DOM 更新。
   • 调用生命周期方法或 Hooks。
7. 更新完成：WIP Fiber 树成为当前 Fiber 树，UI 更新完成。

渲染流程的特点

• 异步渲染：渲染阶段可以中断和恢复，支持高优先级任务插入，提升响应性。
• 批量更新：React 会将多个状态更新批量处理，减少不必要的渲染。
• 虚拟 DOM：通过虚拟 DOM 和 Diffing 算法，React 最小化了对实际 DOM 的操作，提高性能。

什么是协调（Reconciliation）？

协调（Reconciliation）指的是 React 比较新旧虚拟 DOM 树，并决定如何高效更新真实 DOM 的过程。

React 使用虚拟 DOM 来表示 UI 结构。每当 state 或 props 变化，React 会生成一个新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较。这个比较过程依赖于 Diffing 算法，通过找出两棵树之间的差异，React 能够高效地决定需要执行哪些 DOM 更新操作。

协调的核心机制

1. 虚拟 DOM 的作用
   • 虚拟 DOM 是真实 DOM 的内存表示，React 用它来模拟 UI 结构。
   • 通过比较新旧虚拟 DOM 树，React 避免直接操作真实 DOM，从而减少性能开销。
2. Diffing 算法
   • React 的 Diffing 算法遵循以下规则：
     • 不同类型的元素：如果新旧节点的类型不同，React 会销毁旧节点并创建新节点。
     • 相同类型的元素：React 会复用旧节点，仅更新变化的属性（如 className 或 style）。
     • 列表中的元素：通过 key 属性，React 优化列表项的比较，避免不必要的重渲染。
3. 生成更新操作
   • Diffing 算法识别出变化后，React 生成一个更新队列，记录具体的 DOM 操作（如创建、更新或删除节点），最终应用到真实 DOM。

React 如何决定何时更新 DOM？

React 决定何时更新 DOM 的过程主要依赖于以下几个机制：

1. state 或 props 变化
   • 当组件的 state 或 props 发生变化时，React 会触发渲染流程，生成新的虚拟 DOM 树。
   • 通过协调过程，React 比较新旧虚拟 DOM，确定需要更新的部分。
2. 批量更新
   • React 会将多个状态更新批量处理，以减少不必要的渲染。
   • 例如，在事件处理函数中多次调用 setState，React 会合并这些更新，只触发一次渲染。
3. 优先级调度
   • React 使用 Fiber 架构 和 调度器 来管理任务优先级。
   • 高优先级任务（如用户输入）会优先执行，低优先级任务（如数据加载）在浏览器空闲时处理。
4. 提交阶段
   • 协调完成后，React 进入 提交阶段，将更新操作同步应用到真实 DOM，确保 UI 的一致性。