React 渲染原理 —— 深入理解 Fiber 与调和算法

前言

作为工作多年的前端开发者，我们每天都在使用 React，但有多少人真正理解它的渲染机制？本文将深入探讨 React 的核心渲染原理，帮助你从"会用"进阶到"懂原理"。

虚拟 DOM：基石之上

React 引入虚拟 DOM（Virtual DOM）的概念——一种在内存中用 JavaScript 对象表示真实 DOM 的数据结构。每次状态变更时，React 会：

• •构建新虚拟 DOM 树 - 根据新状态计算 UI 描述
• •对比差异 - 新旧虚拟 DOM 树的差异化分析
• •最小化更新 - 只将必要的变更应用到真实 DOM

这种"diffing"算法是 React 性能的核心保障。

调和（Reconciliation）：React 的 diff 算法

React 16 之前采用栈调和算法（Stack Reconciler），它递归遍历整棵虚拟 DOM 树，优点是实现简单，缺点是：

• •同步阻塞：更新过程无法中断，遇到大型组件树会卡顿
• •无法优先级调度：所有更新同等对待，无法优先处理用户交互

Fiber：架构级革新

React 16 引入了 Fiber 架构，这是 React 成立以来最大的内部重构：

#### 什么是 Fiber？

Fiber 是一个链表结构的协调引擎，每个 Fiber 节点代表一个虚拟 DOM 节点，同时携带：

{
  type: Element类型,
  props: 属性对象,
  child: 第一个子节点,
  sibling: 下一个兄弟节点,
  return: 父节点,
  alternate: 旧树中对应的节点,
  effectTag: 当前节点的副作用类型,
}

#### Fiber 的三大核心能力

1. 可中断渲染

传统递归无法暂停，而 Fiber 将渲染工作拆分为工作单元（Work）：

渲染一个 Fiber 节点 → 检查是否有更高优先级任务 → 有则暂停，去处理紧急任务 → 稍后恢复

这得益于 requestIdleCallback（或 React 内部的调度器）。

2. 优先级调度

Fiber 引入了 lanes（赛道） 概念，不同任务有不同优先级：

• •同步优先级：用户交互、输入响应
• •中等优先级：数据请求、列表滚动
• •低优先级：预渲染、非关键动画

3. 精确追踪副作用

每个 Fiber 节点通过 effectTag 标记本次更新需要做的 DOM 操作，这使得 React 可以在渲染阶段只做计算，在提交阶段批量执行 DOM 操作。

两个阶段：Render vs Commit

React 的渲染分为两个大阶段：

Render 阶段（可中断）：构建 Fiber 树、执行 diff 算法、标记副作用。此阶段可以被打断、暂停、恢复，不会触达真实 DOM。

Commit 阶段（同步执行）：遍历所有有副作用的 Fiber 节点、执行 DOM 更新、调用生命周期。此阶段必须同步完成，保证 DOM 的一致性。

深度理解 useEffect 与 useLayoutEffect

• •useEffect：在 Commit 阶段完成后，异步执行（浏览器绘制之后）
• •useLayoutEffect：在 Commit 阶段同步执行，阻塞 DOM 绘制

总结

React 的 Fiber 架构是一个面向未来的设计：

理解这些底层原理，不仅能帮助我们写出更高质量的代码，还能在遇到性能问题时快速定位根因。