6.React 的 Fiber 架构主要是为了解决什么问题？
React Fiber 架构：它到底解决了什么问题？
在 React 的世界里，我们常常听到 Fiber 这个词，它通常与“性能优化”、“异步渲染”等概念一同出现。但 Fiber 架构的诞生，其核心目标究竟是为了解决什么问题？
要理解 Fiber 的“为什么”，我们首先需要回到它诞生之前的世界，看看那时的 React 面临着怎样的挑战。
Fiber 诞生前的世界：同步渲染的挑战
在 React 16 之前，React 使用一种名为“堆栈调和器”（Stack Reconciler）的机制来更新 UI。当组件的状态发生变化时，React 会启动一个调和（Reconciliation）过程，计算出新的 Virtual DOM，并与旧的进行比较（Diffing），最后将差异更新到真实的 DOM 上。
这个过程最大的特点是：**同步且不可中断**。
我们可以将它想象成一个电话通话：一旦通话开始，就必须等到通话结束才能去做别的事情。如果这次通话（渲染任务）时间很长——比如需要更新一个包含成百上千个组件的复杂列表——主线程就会被长时间占用。
这时，浏览器就无法响应其他更高优先级的任务，例如：
用户输入：用户在输入框里打字，却迟迟看不到字符出现。
动画效果：页面上的 CSS 动画或滚动效果会变得卡顿，甚至完全停止。
对于用户来说，直观的感受就是**页面卡死、无响应**。这种糟糕的体验在日益复杂的 Web 应用中是不可接受的。核心矛盾在于，单一的主线程上，冗长的 JavaScript 计算任务阻塞了更高优先级的用户交互和页面渲染。
Fiber 的核心思想：化整为零，可中断、可恢复
为了解决同步渲染带来的阻塞问题，React 团队设计了全新的调和引擎——Fiber Reconciler。
Fiber 的核心思想非常直观：**将一个庞大的更新任务，拆解成许多微小的工作单元**。
React 不再一口气完成整个渲染任务，而是将工作分配到一个个“fiber”节点上。每个 fiber 都可以看作是一个轻量化的工作单元。React 可以在完成一个工作单元后，暂停下来，将主线程的控制权交还给浏览器。浏览器可以利用这个间隙去处理更高优先级的任务（比如响应用户输入）。处理完之后，React 会在下一次浏览器空闲时，从上次暂停的地方继续执行下一个工作单元。
这个过程就像一位厨师在准备一桌复杂的宴席：
旧模式（同步渲染）：厨师必须从头到尾做完一道大菜，中途不能停。如果此时有客人想喝水，只能等着。
新模式（Fiber）：厨师将做菜过程分解为“洗菜”、“切菜”、“配料”等多个小步骤。每完成一小步，他都会抬头看看有没有客人有紧急需求。如果有，就先去倒杯水，然后再回来继续下一步。
这种“化整为零、可中断、可恢复”的机制，是 Fiber 架构的精髓。它将渲染过程从一个“必须一次性完成”的任务，变成了一个“可以按优先级调度”的任务。
为了实现这一点，React 内部将更新过程划分为两个阶段：
渲染/调和阶段（Render/Reconciliation Phase）：这是一个**可中断**的阶段。在此阶段，React 会构建出“工作正在进行中”的 fiber 树（work-in-progress tree），计算出所有节点的变更。由于这个过程可能会被暂停、重做甚至丢弃，所以它不会产生任何用户可见的副作用（比如操作 DOM）。
提交阶段（Commit Phase）：这是一个**不可中断**的同步阶段。一旦调和阶段完成，React 就会进入提交阶段，将计算出的所有变更一次性应用到 DOM 上。这个过程必须是同步的，以确保 UI 的一致性，避免用户看到渲染了一半的、不完整的界面。
Fiber 究竟解决了哪些关键问题？
综上所述，我们可以清晰地归纳出 Fiber 架构主要解决的问题：
- 增量渲染，避免主线程阻塞
这是最核心的一点。通过将渲染任务拆分为小块并分散到浏览器的多个帧（frame）中执行，Fiber 极大地减少了单次 JavaScript 执行时间，避免了主线程被长时间霸占，从而让浏览器有时间响应用户操作和执行动画，使应用保持流畅。
- 实现更新的优先级调度
既然任务可以被中断，那么“接下来该执行哪个任务”就成了一个可以被管理的事情。Fiber 架构使得 React 能够为不同类型的更新赋予不同的优先级。例如，用户输入事件（如打字）的优先级最高，需要立即响应；而动画更新的优先级次之；网络请求返回的数据更新优先级则可以更低。这种优先级调度确保了最关键的交互能得到最及时的处理。
- 为并发模式（Concurrent Mode）等新特性铺平道路
Fiber 本身是一种底层架构，它为 React 未来的诸多新特性提供了可能性。我们今天熟知的 Suspense（用于数据获取）、useTransition 和 useDeferredValue 等并发特性，都建立在 Fiber 架构可中断和可调度的能力之上。没有 Fiber，这些精细化的渲染控制能力便无从谈起。
总结
我们可以认为，React Fiber 架构的出现，标志着 React 的关注点从“如何进行更新”演进到了“如何调度更新”。它从根本上改变了 React 的工作方式，将一个宏大的、不可打断的渲染任务，重塑为一个可拆分、可暂停、可调度、可赋予优先级的协作式系统。
最终，Fiber 解决的并不仅仅是一个技术瓶颈，而是关乎用户体验的根本问题：**如何确保应用在持续进行复杂计算的同时，依然能够保持流畅的交互和视觉响应**。这使得 React 能够在构建更加复杂、功能更加强大的应用时，依然能为用户提供卓越的体验。