React Fiber 是 React 16 中引入的一种新的协调引擎或重新实现核心算法的方式。它的主要目标是解决 JavaScript 单线程执行模型带来的限制，通过实现时间切片（Time Slicing）来提高 React 应用的响应性和性能。
2. Fiber 的核心问题：单线程的局限性
JavaScript 是单线程的，这意味着它一次只能执行一个任务。在 React 应用中，当需要渲染大量组件或处理复杂的状态更新时，这种单线程模型导致以下问题：
- 长时间任务阻塞：大量的计算可能会阻塞主线程，导致用户交互、动画等其他任务无法及时响应。
- 无法中断和恢复：一旦开始渲染过程，就必须完成整个过程，无法中途暂停或放弃。
- 缺乏优先级概念：所有更新任务被视为同等重要，无法优先处理更紧急的更新。
3. Fiber 的解决方案：时间切片和新的协调算法
Fiber 架构通过以下两个核心概念来解决单线程的局限性：
2.1 时间切片（Time Slicing）
时间切片允许 React 将渲染工作分解成小的工作单元，并将这些工作单元分散到多个帧中执行。这意味着：
- React 可以在每一帧中执行一小部分工作。
- 在两个工作单元之间，React 可以让出控制权给浏览器，允许浏览器处理用户输入、运行动画等高优先级的任务。
- 如果有更高优先级的工作需要执行，React 可以中断当前的渲染过程，先处理紧急任务。
2.2 新的协调算法
Fiber 引入了一个新的协调算法，它具有以下特点：
- 可中断和恢复：渲染过程可以被中断和稍后恢复，而不会丢失状态。
- 优先级调度：不同的更新可以被赋予不同的优先级，允许 React 首先处理最紧急的更新。
- 错误边界改进：提供了更强大和一致的错误处理机制。
4. Fiber 的工作原理
Fiber 架构的工作原理可以概括为以下几个关键点：
4.1 Fiber 节点和 Fiber 树
- 每个 React 元素都对应一个 Fiber 节点。
- Fiber 节点构成了一个树状结构，称为 Fiber 树。
- 每个 Fiber 节点包含了组件的状态、props、需要执行的工作等信息。
4.2 工作循环和优先级
- React 使用一个工作循环（work loop）来遍历 Fiber 树。
- 在每一帧中，React 会检查是否还有时间继续执行工作。
- 如果没有足够的时间，React 会暂停当前工作，将控制权交还给浏览器。
- 工作会被赋予不同的优先级，React 会优先处理高优先级的工作。
4.3 两个主要阶段
Fiber 的工作过程分为两个主要阶段：
- Render 阶段（可中断）：
- 构建或更新 Fiber 树
- 执行协调（Reconciliation）过程
- 收集需要执行的副作用（Effect List）
- Commit 阶段（不可中断）：
- 根据 Effect List 更新 DOM
- 调用生命周期方法和 hooks
- 处理 ref 等
5. Fiber的学习路线
那么我们会分为四个章节去完成Fiber的学习，在理解这四个章节后，就理解Fiber的实现了。
- React Fiber架构：调度核心原理与实现
- React Fiber架构：深入解析任务队列、可中断渲染、调度、同步模式
- React Fiber架构：链表、Fiber节点与Fiber树
- React Fiber架构：React Fiber的创建、更新、提交