获课：xingkeit.top/18113/

Fiber架构的核心突破，是把传统递归遍历虚拟DOM树的不可中断更新流程，拆解成一个个可暂停、可恢复的独立工作单元，彻底解决了大组件树更新时长时间阻塞主线程的痛点。而Fiber节点与双缓冲树，正是这套架构最核心的两大底层支撑，跳过零散的API调用，从底层逻辑完整实现这两部分，才能真正吃透React 16之后整个调度体系的运行本质。

Fiber节点的本质，是把原本树形结构的虚拟DOM，改造成了用链表串联的可遍历工作单元。它不再像传统虚拟DOM那样只通过children属性关联所有子节点，而是为每个Fiber节点设计了三个核心关联指针：指向第一个子节点的child、指向相邻下一个兄弟节点的sibling、指向父节点的return。这套链表结构把原本的树遍历，变成了可以随时暂停、随时恢复的线性遍历，浏览器可以在每一帧的空闲时间里处理几个Fiber节点，时间切片用完就立刻把执行权交还给主线程响应用户输入，完全不会出现长时间卡顿的情况。每个Fiber节点还会完整记录自身的类型、属性、状态、对应的真实DOM节点信息，所有更新需要的上下文都被封装在这个独立单元里，哪怕遍历中途被中断，下次恢复时也能精准从上次停下的位置继续执行，不需要重复处理已经完成的工作。

双缓冲树是Fiber架构实现增量更新的核心设计，它的核心思路是在内存里同时维护两棵Fiber树：一棵是当前已经渲染到页面上的“当前树”，另一棵是正在后台异步构建的“工作树”。当触发一次更新时，React不会直接修改正在屏幕上展示的当前树，而是在后台全量构建新的工作树，所有的Fiber节点对比、新增、删除操作都在这棵后台树上完成，完全不会干扰正在运行的页面渲染。等整棵工作树全部构建完成，所有变更都梳理完毕后，React才会一次性把两棵树的引用指针互换，新的工作树直接变成新的当前树，下一次更新时，之前的旧当前树就会被复用，成为新的后台工作树的基础。

这套设计带来了两个关键优势：一是页面展示永远不会出现半更新的不一致状态，所有变更都在内存中完成，只有全部准备就绪后才会一次性提交到页面，用户永远看不到中间的更新过程；二是最大程度复用了已有的Fiber节点，不需要每次更新都全量创建新的节点对象，大幅降低了内存开销。在双缓冲树的构建过程中，React会逐个对比当前树和新的虚拟DOM，能复用的节点直接复用，只给发生变化的节点打上标记，记录新增、删除、更新的操作类型，等整棵树遍历完成后，所有需要执行的DOM操作都已经被标记好，最后在同步的提交阶段一次性批量执行，既保证了主线程不被长时间阻塞，又实现了DOM操作的最小化。

完整实现这套体系的过程，本质上是把Fiber架构“可中断遍历、增量提交”的核心逻辑落地，不需要依赖任何第三方库，就能亲手搭建出一个具备时间切片调度能力的迷你渲染内核。当你亲手走完从虚拟DOM转Fiber链表、再到双缓冲树增量对比、最后批量提交变更的全流程，就能彻底理解React Fiber架构背后的设计巧思，不再停留在“概念听说过”的表层认知，对后续复杂的状态更新、调度优先级等进阶特性的理解也会水到渠成。