React Fiber 架构的双缓存机制与渲染流程原理 描述 React Fiber 架构引入了双缓存机制来优化渲染性能，确保在并发模式下更新过程可中断与恢复。双缓存指同时存在两棵Fiber树：当前显示内容对应的"Current树"和正在构建的"WorkInProgress树"。这套机制协调了渲染阶段的异步中断与提交阶段的同步持久化，是实现时间切片与优先级调度的基础。 解题过程 双缓存树的结构与作用 Current树 ：当前已渲染的UI对应的Fiber节点树，每个Fiber节点通过 alternate 属性指向WorkInProgress树的对应节点。 WorkInProgress树 ：正在内存中构建的新树，完成后会替换Current树。两棵树通过节点级的 alternate 指针相互关联，形成"双缓存"结构。 优势 ：WorkInProgress树的构建完全在内存中进行，不会直接影响屏幕显示。即使构建过程被中断，用户仍可流畅交互当前UI。 渲染阶段的渐进式构建 初始化 ：首次渲染时没有Current树，React根据组件结构创建完整的WorkInProgress树，此时所有节点均为新构建。 更新触发 ：状态变更后，React从根节点开始深度优先遍历，为每个组件创建或复用Fiber节点： 复用机制：通过 alternate 找到Current树中的对应节点，直接复用其属性（如DOM引用），仅更新变化的props或状态。 副作用标记：在构建过程中，根据组件变化类型（如节点增删、属性更新）为Fiber节点打上相应的 flags （旧版为 effectTag ）。 可中断逻辑 ：React将构建过程分解为多个小任务单元（即Fiber节点处理），每完成一个单元检查剩余时间。若时间不足，保存当前进度（通过Fiber节点的 return 、 child 、 sibling 指针）并让出主线程。 提交阶段的原子性切换 准备提交 ：WorkInProgress树构建完成后，React收集所有带副作用的Fiber节点形成"副作用列表"，确保更新顺序正确（如子节点更新需在父节点之前）。 树切换 ：通过一次原子操作将FiberRoot的 current 指针从Current树指向已完成的WorkInProgress树。此时新树变为Current树，旧树变为待回收的WorkInProgress树。 副作用执行 ：同步执行所有副作用（如DOM增删改、生命周期调用），此过程不可中断以避免UI不一致。完成后，旧Current树的节点会被逐步回收或复用为下一次更新的WorkInProgress树。 异常处理与优先级重置 若构建过程中发生错误或高优先级更新插入，React丢弃未完成的WorkInProgress树，直接复用Current树重新开始构建，避免部分更新导致的UI错误。 低优先级更新被高优先级打断时，已完成的工作会暂存于WorkInProgress树，高优先级任务完成后从中断处继续。 总结 双缓存机制通过内存中构建新树、原子性切换当前树，实现了无感知的UI更新。结合Fiber节点的复用与副作用跟踪，既保证了渲染效率，又为并发更新提供了基础保障。