在React开发中，我们常听说“Fiber架构”“渲染流程”“双缓冲”这些概念，很多开发者只知其名，却不解其理——为什么React 16要引入Fiber？渲染流程的两大阶段有何区别？双缓冲机制又如何提升渲染效率？
本文将结合底层原理与实际应用，把React整体架构、渲染流程、Fiber核心概念及双缓冲机制彻底揉碎讲透，搭配通俗解释和可视化图表，帮你从根源上理解React的底层工作逻辑，面试时也能从容应对。
一、为什么需要Fiber？—— 从Stack架构的痛点说起
在React 16之前，React采用的是Stack架构，其核心是Stack Reconciler（栈协调器）。这种架构的最大问题的是：渲染过程同步且不可中断。
当组件树较深时，React会递归遍历整个组件树进行虚拟DOM比对，这个过程会一直占用主线程。如果遍历耗时超过16.6ms（浏览器每秒刷新60帧的时间），就会导致浏览器无法响应用户输入、滚动、动画等操作，出现视觉卡顿、掉帧等问题——这就是旧架构的致命痛点，也是Fiber架构诞生的核心原因。
为了解决这个问题，React 16彻底重构了底层架构，引入了Fiber架构，核心目标是实现“可中断、可恢复、带优先级”的渲染机制，让React能够在复杂应用中依然保持流畅的交互体验。
二、Fiber核心解析：三个维度读懂它的本质
很多人误以为Fiber是一个API或工具，其实它是React底层的架构重构，同时兼具数据结构和工作单元的属性。我们可以从三个维度，彻底理解Fiber的本质：
1. 维度一：Fiber是一种架构
Fiber架构是React 16后的核心底层架构，替代了之前的Stack架构，核心由三大组件组成，三者协同工作，实现高效渲染：
这三大组件的分工清晰，层层递进，共同解决了旧架构的性能瓶颈：
- Scheduler（调度器） ：解决“I/O瓶颈”。负责给所有更新任务排序优先级，让紧急任务（如用户输入、动画）优先进入协调器，避免低优任务阻塞高优任务，确保交互响应流畅。
- Reconciler（协调器） ：解决“CPU瓶颈”。负责实现虚拟DOM，将更新流程从“不可中断的递归”改为“可中断的循环”，计算出UI的变化，标记需要更新的节点。
- Renderer（渲染器） ：负责将协调器计算出的UI变化，同步渲染到宿主环境（比如浏览器的DOM中），确保UI与数据一致。
2. 维度二：Fiber是一种数据类型
Fiber本质上是一个JavaScript对象，可以理解为“增强版的虚拟DOM节点”——每个Fiber对象对应一个DOM节点（或组件），不仅包含了组件的类型、DOM相关信息，还新增了用于调度和渲染的关键属性。
与旧架构的虚拟DOM不同，Fiber对象之间通过链表的方式串联，形成一棵Fiber树，而非递归树。核心链表指针如下：
child：指向当前Fiber节点的第一个子Fiber节点；sibling：指向当前Fiber节点的下一个兄弟Fiber节点；return：指向当前Fiber节点的父Fiber节点（回溯指针）；alternate：指向另一棵Fiber树中的对应节点（用于双缓冲机制）。
这种链表结构的核心优势的是：支持中断和恢复。递归调用一旦开始就无法中断，但链表遍历可以随时停止，只需记录当前遍历的Fiber节点，下次恢复时从该节点继续即可，这是时间切片实现的基础。
3. 维度三：Fiber是一个动态工作单元
每个Fiber节点不仅是数据载体，还是一个“工作单元”——它保存了本次更新中该节点的变化数据、需要执行的工作（如新增、删除、更新DOM）以及副作用信息（如useEffect的执行）。
React会将渲染任务拆分成一个个小的工作单元（每个Fiber节点就是一个工作单元），每次只处理一个工作单元，处理完后检查是否有剩余时间或更高优先级任务，若没有再继续处理下一个——这种“化整为零”的方式，就是Fiber解决卡顿的关键。
三、React整体渲染流程：两大阶段，三大组件协同
理解了Fiber的核心，再看React的整体渲染流程就会非常清晰。React的渲染流程本质上是“计算UI变化”到“渲染UI”的过程，可分为render阶段和commit阶段两大核心阶段，对应三大组件的协同工作，核心公式可总结为：
state = reconcile(update) // 协调器计算最新状态
UI = commit(state) // 渲染器渲染最终UI
1. Render阶段：异步可中断，内存中完成计算
Render阶段由调度器（Scheduler） 和协调器（Reconciler） 共同完成，核心是“计算出最终要渲染的UI”，这个过程完全在内存中进行，异步、可中断，不会影响页面显示。
（1）调度器的工作：给任务排优先级
调度器的核心作用是“任务调度”，给所有更新任务（如setState、useState触发的更新）分配优先级，避免高优任务被低优任务阻塞。
这里有个小细节：浏览器原生有一个API——requestIdleCallback，可以在浏览器空闲时执行任务，这与调度器的逻辑类似。但由于该API的兼容性较差，且无法满足React的精细优先级控制需求，React团队自己实现了一套调度机制，未来还计划将Scheduler单独发布为独立包，供其他需要任务调度的项目使用。
调度器的核心逻辑的是“时间切片”：将每帧（16.6ms）的剩余时间分配给任务，每次执行一个工作单元后，调用shouldYield()方法判断是否有剩余时间，若没有则暂停任务，将主线程还给浏览器，等待下一个宏任务再继续执行。
（2）协调器的工作：生成Fiber树，标记变化
协调器是Render阶段的核心，负责接收调度器分配的任务，采用深度优先遍历的方式，遍历并创建Fiber节点，串联成Fiber树，同时执行Diff算法，标记节点的变化（用flags标记，如更新、删除、插入）。
遍历过程分为两个子阶段，也就是常说的“递”和“归”：
- 递阶段：从根Fiber（HostRootFiber）开始，向下遍历每个节点，执行
beginWork方法，根据当前Fiber节点创建下一级Fiber节点，同时进行Diff比对，标记节点变化。 - 归阶段：当遍历到叶子节点后，开始回溯，执行
completeWork方法，收集当前节点的副作用（如DOM操作、useEffect回调），然后通过sibling指针切换到兄弟节点，继续遍历。
整个过程可以随时被中断（如时间片耗尽、有更高优先级任务），中断后会保存当前遍历的Fiber节点，恢复时从该节点继续，不会重复已完成的工作——这就是Fiber架构解决CPU瓶颈的核心。
2. Commit阶段：同步不可中断，渲染到真实UI
Commit阶段由渲染器（Renderer） 负责，核心是“将Render阶段计算出的UI变化，同步渲染到宿主环境”，这个过程同步、不可中断——因为一旦中断，就会导致UI与数据不一致，出现页面闪烁、错乱等问题。
Commit阶段又分为三个子阶段，按顺序执行：
- BeforeMutation阶段：执行DOM操作前的准备工作，比如读取当前DOM的属性（如scrollTop），为后续DOM操作做铺垫。
- Mutation阶段：核心阶段，根据协调器标记的flags，执行真实的DOM操作（新增、删除、更新DOM），同时完成Fiber双缓冲树的切换（后续详细讲解）。
- Layout阶段：DOM操作完成后，执行后续逻辑，比如更新ref引用、执行useEffect的回调函数，同时可以获取到更新后的DOM属性。
四、Fiber双缓冲机制：为什么能实现无闪烁更新？
Fiber双缓冲机制是React渲染优化的另一大核心，很多开发者对它的理解比较模糊，其实它的原理很简单：在内存中同时维护两棵Fiber树，通过树切换实现高效、无闪烁的更新。
1. 两棵Fiber树的作用
React中存在两棵Fiber树，它们通过alternate指针相互指向，各司其职：
- Current Fiber Tree（当前树） ：与当前页面显示的真实DOM一一对应，是“已渲染”的树，用户能看到的UI就是基于这棵树渲染的。
- WorkInProgress Fiber Tree（工作树） ：在内存中构建的新树，用于处理本次更新。React会在WorkInProgress树上完成所有Fiber节点的创建、Diff比对和副作用收集，整个过程不会影响Current树和真实DOM。
2. 双缓冲的核心流程
暂时无法在飞书文档外展示此内容
具体流程可以拆解为3步：
- 触发更新（如setState）后，React会以Current树为模板，在内存中创建WorkInProgress树，开始遍历并更新节点；
- 在WorkInProgress树上完成所有计算（Diff、副作用收集），此时WorkInProgress树是“最新的、完整的”；
- 进入Commit阶段的Mutation子阶段，React会将Current树和WorkInProgress树的指针互换（通过alternate指针），此时WorkInProgress树变为新的Current树，原Current树变为下一次更新的WorkInProgress树；
- 最后，渲染器根据新的Current树，同步更新真实DOM，用户看到最新的UI。
3. 双缓冲的优势
为什么需要双缓冲？核心是避免页面闪烁。如果直接在Current树上修改节点，修改过程中会导致DOM处于“不完整”状态，用户会看到页面闪烁；而WorkInProgress树在内存中完成所有计算，只有当它完全准备好后，才会与Current树切换，一次性更新DOM，确保用户看到的始终是完整的UI。
同时，双缓冲机制还能复用Fiber节点——通过alternate指针，React可以复用之前的Fiber节点，减少重复创建节点的开销，提升渲染性能。
五、面试高频题解析
结合上面的内容，我们来解析两道高频面试题，帮你快速掌握答题要点：
面试题1：是否了解过React的整体渲染流程？里面主要有哪些阶段？
参考答案：
React的整体渲染流程分为Render阶段和Commit阶段两大核心阶段，由调度器、协调器、渲染器三大组件协同完成：
- Render阶段：由调度器和协调器负责，在内存中异步、可中断地执行。调度器负责排序任务优先级，高优任务优先进入协调器；协调器采用深度优先遍历，创建Fiber树，执行Diff算法，标记节点变化和副作用。
- Commit阶段：由渲染器负责，同步、不可中断地执行。核心是将Render阶段计算出的UI变化渲染到真实DOM，分为BeforeMutation、Mutation、Layout三个子阶段，分别负责DOM操作前准备、执行DOM操作、DOM操作后逻辑。
关键要点：Render阶段异步可中断，Commit阶段同步不可中断；三大组件的分工；Render阶段的“递”“归”过程。
面试题2：谈谈你对React中Fiber的理解以及什么是Fiber双缓冲？
参考答案：
Fiber是React 16引入的核心架构，同时兼具数据结构和工作单元的属性，可从三个维度理解：
- 架构层面：Fiber架构替代了旧的Stack架构，由调度器、协调器、渲染器组成，实现了可中断、可恢复的渲染机制，解决了旧架构的卡顿问题。
- 数据结构层面：Fiber是一个JavaScript对象，对应一个DOM节点或组件，通过child、sibling、return指针串联成链表结构的Fiber树，支持中断和恢复遍历。
- 工作单元层面：每个Fiber节点保存了本次更新的变化数据、需要执行的工作和副作用信息，是React拆分渲染任务的最小单元。
Fiber双缓冲机制是React的渲染优化手段：
React在内存中同时维护两棵Fiber树——Current树（对应真实DOM）和WorkInProgress树（内存中构建的新树），通过alternate指针相互指向。更新时，在WorkInProgress树上完成所有计算，然后切换两棵树的指针，一次性更新DOM，避免页面闪烁，提升渲染效率。
六、总结
React Fiber架构的核心，是通过“可中断的工作单元”“优先级调度”和“双缓冲机制”，解决了旧架构的卡顿问题，让React能够高效处理复杂应用的渲染需求。
我们可以用一句话总结：Fiber是架构、是数据结构、是工作单元，React的渲染流程是“Render阶段异步计算变化，Commit阶段同步渲染UI”，而双缓冲机制则是实现无闪烁更新的关键。
