Fiber诞生前的世界：同步渲染
在React 16之前，React使用的是所谓的堆栈调和器（Stack Reconciler）。
最大特点：同步且不可中断 。
一旦开始，就必须等待它结束。
挑战：
如果渲染一个复杂的组件树，主线程会被长时间占用，导致：
- 用户输入无响应：打字输入迟迟不显示。
- 动画效果卡顿：CSS动画、页面滚动掉帧。
- 糟糕的用户体验：页面给用户的直观感受就是卡死。
同步渲染的阻塞问题
同步渲染如何阻塞主线程。
Fiber的核心思想：化整为零
为了解决阻塞问题，React设计了全新的调和引擎------Fiber Reconciler。
核心思想
将一个庞大的更新任务，拆分成许多微小的工作单元（Fiber）。
React可以在每完成一个工作单元后，将控制权交还给浏览器，检查是否有更高优先级的任务（如用户输入）。这个过程是可中断、可恢复的。
Fiber的两个阶段
为了实现可中断更新，React将工作流划分为两个阶段。
1.渲染/调和阶段（Render/Reconsiliation Phase）
这个一个可中断的异步阶段。
- 构建"工作中"的Fiber树（work-in-progress-tree）。
- 计算出所有节点的变更。
- 此过程可以被暂停、重做、丢弃，不会产生用户可见的副作用。
2. 提交阶段（Commit Phase）
这个一个不可中断的同步阶段。
- 一旦调和阶段完成，进入提交阶段。
- 将计算出的所有变更一次性应用到DOM上。
- 此过程必须同步，以确保UI的一致性，避免出现渲染了一半的界面。
Fiber的渲染流程
Fiber架构将渲染任务穿插在浏览器的空闲时间内执行，避免了长时间阻塞。
Fiber解决了哪些关键问题？
1. 增量渲染，避免主线程阻塞
核心价值。通过将任务拆分到多个浏览器帧中执行，Fiber极大地减少了单次JS执行时间，让应用保持流畅响应。
2. 实现更新的优先级调度
任务可中断，React能为不同更新赋予不同优先级。
- 最高优先级：用户输入（打字，点击）
- 中等优先级：动画更新
- 低优先级：网络请求返回的数据更新
3. 为并发特性铺平道路
Fiber是一种底层架构，它为React未来的诸多新特性提供了可能性。
我们今天熟知的Suspense、useTransition和useDeferredValue等并发特性，都建立在Fiber可中断、可调度的能力之上。
总结回顾演进历史：从"如何更新"到"如何调度更新"
Stack Reconciler
一个宏大的、不可打断的渲染任务。
Fiber Reconciler
一个可拆分、可暂停、可调度、可赋予优先级的协作式系统。
Fiber解决的是关乎用户体验的根本问题：如何确保应用在持续进行复杂计算的同时，依然能保持用户交互的流畅性和视觉响应。
一句话总结
React通过引入Fiber将计算Virtual DOM diff的过程拆分，避免长时间占用主线程。
引申：如何拆分任务
Fiber本身是一种链表结构，不同于之前递归栈的不可中断，链表设计可以方便地断点恢复。
更多细节推荐阅读
走进React Fiber的世界深入理解React Fiber机制