获课：jzit.top/14863/

揭秘React18底层：卡颂带你手写Fiber架构与并发模式

提起React，多数前端开发者都熟悉它的组件化与虚拟DOM，但很少有人真正说清：从React 15到React 16，这个框架到底经历了什么本质变化？答案就在两个字——Fiber。而卡颂的《React设计原理》与配套课程，正是从零开始拆解这套底层架构，带你完成“从会用React到读懂React”的关键跨越。

从“不可中断”到“可中断”：Fiber架构的诞生

React 15及之前的版本采用Stack Reconciler（栈调和器），其更新过程依赖JavaScript的递归调用栈，意味着一旦开始渲染一棵大型组件树，主线程便被完全阻塞，直到整棵树渲染完毕。这在复杂页面中会导致用户交互卡顿、动画掉帧。

Fiber架构的诞生，正是为了颠覆这一局面。 从React 16开始，新架构将整个更新流程拆分为Scheduler（调度器）、Reconciler（协调器）、Renderer（渲染器）三部分。其核心变革在于：Reconciler中的更新流程从“不可中断的递归”变为“可中断的循环过程”。Fiber节点本质上是一个增强版的虚拟DOM数据结构，它不仅描述UI，更是一个工作单元，通过链表指针（child、sibling、return）组织起来，使得遍历可以在任意节点暂停并记录位置，等待恢复后继续执行。

双缓冲与两阶段：底层如何实现“并发”

理解Fiber架构的关键在于两个核心机制：

第一，双缓存技术。 React在内存中维护两棵Fiber树——Current Tree（当前已渲染到UI的树）与WorkInProgress Tree（准备用于下一次渲染的树）。所有更新工作都在WorkInProgress树中进行，完成后在commit阶段一次性替换为Current树。这套机制既避免了更新丢失，又保证了UI切换瞬间的一致性。

第二，两阶段拆分。 整个渲染流程被明确划分为render阶段（可中断） 与commit阶段（不可中断）。在render阶段，React遍历Fiber节点、构建WorkInProgress树、执行Diff并标记副作用，这些工作被拆分成细粒度单元，由调度器控制执行——遇到高优先级任务（如用户输入）时可随时中断，稍后恢复。而在commit阶段，所有副作用被一次性、同步地应用到真实DOM，确保UI变更短促且完整。

并发模式：从“开启开关”到“按需使用”

在React 18之前，并发能力需要通过显式开启Concurrent Mode来实现，但这一模式存在两个问题：一是开启后影响整个应用，难以渐进升级；二是开发者更应从“使用并发特性”中获益，而非被迫切换整个应用模式。

React 18的策略调整为：开发者统一使用ReactDOM.createRoot创建应用，以“是否使用并发特性”作为是否开启并发更新的依据。典型的并发特性如startTransition和useTransition，通过将非紧急更新（如大列表渲染、复杂图表绘制）标记为低优先级，保证紧急交互（如输入响应）不被阻塞。示例中，当拖动Slider控制一棵复杂树的渲染时，startTransition将树更新降级，从而让Slider滑动保持流畅——这正是可中断渲染带来的“性能爆炸”式提升。

从“手写”到“通悟”：卡颂课程的价值

卡颂所著的《React设计原理》基于React 18源码，从“理念、架构、实现”三个层次层层递进，全书贯彻“知识屏蔽”原则——防止读者陷入源码汪洋，力争每一章都能帮读者撬动React版图的一角。

这种从0到1手写实现的训练方式，正是通悟底层原理的最佳路径。当你亲手实现过Fiber节点的遍历、中断与恢复机制，便会理解“并发渲染”不再是一个抽象概念，而是一套将渲染任务“化整为零”的调度策略——这也正是useTransition、Suspense等新特性的底层基石。从“调包侠”到“懂原理”，这一跃，往往决定了一个前端开发者的技术上限。