各位前端界的“架构师预备役”们，还有那些还在用 alert 和 document.write 写代码的“远古时代幸存者”们，大家好。
今天我们不聊 API，不聊 Hooks 的奇技淫巧，我们来聊聊 React 这头巨兽的“内功心法”。如果 React 是一个神厨，那么我们今天要剖析的这三样东西，就是他厨房里的“三大法宝”：分治法、优先级调度和内存复用。
这三样东西，听起来像是计算机科学的教科书定义，但在 React 源码里，它们简直就是一场精心编排的交响乐。今天，我就以“React 架构师”的身份，带你们扒开 React 的源码，看看它是如何把“同步地狱”变成“并发天堂”的。
准备好了吗？让我们开始这场源码深潜。
第一乐章：分治法——把大象装进冰箱，只需要几步
在 React 16 之前，我们的世界是同步的。setState 一调用，React 就像一头倔驴，必须把整个虚拟 DOM 树从头到尾遍历完，算出差异，再同步更新 DOM。如果你的页面里有 1000 个列表项，用户点击一下，页面就会卡死 100 毫秒——这 100 毫秒里，你的用户可能已经把网页关了，然后在评论区骂你“这就是垃圾 UI”。
React 团队意识到，这不行。我们要的是“响应式”，不是“卡顿式”。
于是，他们引入了 Fiber 架构。这本质上就是分治法的极致应用。
1. 从“递归”到“迭代”的哲学转变
在计算机科学中，递归往往是最优雅的，但它有一个致命弱点：堆栈溢出。
想象一下，你要把一个巨大的拼图拼完。递归就像是你坐在椅子上，闭着眼睛，手里抓着拼图，嘴里念叨着：“拼好了就拼好了……拼好了就拼好了……拼好了……”（递归调用）。如果拼图有 10 万块，你的大脑（调用栈）就会爆炸。
React 16 之前的 reconcileChildren 就是递归。React 团队觉得这太脆弱了，于是他们决定把它改成迭代。
2. Fiber 节点：任务的原子
Fiber 的核心数据结构，就是一个个节点。每个节点代表一个 React 组件。每个节点不仅存了组件的信息，还存了它自己的“孩子”、“兄弟”和“父节点”。
// 这是一个极度简化版的 Fiber 节点结构
class FiberNode {
constructor(tag, pendingProps, key) {
this.tag = tag; // 组件类型：FunctionComponent, ClassComponent 等
this.key = key; // 唯一标识
// 核心结构：分治法的体现
this.return = null; // 父节点
this.child = null; // 第一个子节点（任务的下级）
this.sibling = null; // 下一个兄弟节点（任务的平级）
// 内存复用的关键：alternate 属性
this.alternate = null; // 指向旧树中的对应节点
this.pendingProps = pendingProps;
this.memoizedProps = null;
// ... 其他属性
}
}看到这个结构了吗？这就像是一个任务队列。React 不再是一次性处理所有事情，而是每次处理一个任务（一个 Fiber 节点），处理完这个节点，它就去检查一下：“老板，我干完活了，但我还有时间吗？”
3. WorkLoop：分治的执行者
这是分治法在源码中的核心体现——workLoop 函数。它就像一个不知疲倦的工人，手里拿着任务清单。
function workLoopConcurrent() {
// 只要还有任务，且浏览器还有空余时间（deadline 没到），就继续干活
while (workInProgress !== null && !shouldYield()) {
// performUnitOfWork 就是在执行当前这个“原子任务”
workInProgress = performUnitOfWork(workInProgress);
}
}performUnitOfWork 做了什么呢？它就像一个微型的递归逻辑，但是是手动的：
function performUnitOfWork(fiber) {
// 1. 如果有子节点，先去处理子节点（深度优先）
if (fiber.child !== null) {
fiber.child.return = fiber;
return fiber.child;
}
// 2. 如果没有子节点了，回溯到父节点
let nextFiber = fiber;
while (nextFiber !== null) {
// 3. 尝试处理兄弟节点
if (nextFiber.sibling !== null) {
nextFiber.sibling.return = nextFiber.return;
return nextFiber.sibling;
}
// 4. 没有兄弟了，回溯到爷爷节点
nextFiber = nextFiber.return;
}
// 5. 任务结束
return null;
}看懂了吗？这就是分治法。React 把渲染一棵巨大的树，拆解成了成千上万个微小的任务。每个任务只负责处理自己的逻辑，然后“交棒”给下一个任务。如果浏览器累了，它就暂停；如果用户点击了（高优先级任务），它就立马中断当前的低优先级任务，去处理点击。
这就是分治法的魅力：化整为零，各个击破。
第二乐章：优先级调度——让忙碌的人先走
有了分治法，React 知道怎么拆解任务了。但是，任务很多，时间很紧，怎么办？这就要用到优先级调度。
React 源码中有一个独立的模块叫 Scheduler。这东西简直就是时间管理的教科书。
1. 优先级的阶级
在 React 的世界里，任务是有生死的。高优先级任务（比如用户点击按钮、输入文字）必须立刻执行；低优先级任务（比如后台计算数据、复杂的布局重排）可以等等。
React 内部定义了几个优先级等级（从高到低）：
- Immediate Priority (立即执行)：比如点击按钮。
- User Blocking Priority (用户阻塞)：比如动画。
- Normal Priority (普通优先级)：默认的渲染。
- Low Priority (低优先级)：比如某些副作用。
- Idle Priority (空闲优先级)：浏览器完全没干别的事了。
2. 时间切片
优先级怎么实现？靠的是 Time Slicing（时间切片）。
传统的 JavaScript 是单线程的，你写一个 for 循环跑 100 万次，浏览器就会卡死。React 的 Scheduler 就是为了解决这个问题。
它利用浏览器的 requestIdleCallback（如果支持）或者 setTimeout（降级方案）来让出主线程。它给浏览器设定一个 deadline（截止时间），比如 5 毫秒。
3. 源码中的调度逻辑
让我们看看 Scheduler 是怎么判断“该不该停下来的”。
// 简化版的 Scheduler 实现
function scheduleWork(root, expirationTime) {
// 1. 把任务放入队列
// queue.push({ node: root, expirationTime: expirationTime });
// 2. 检查是否需要调度
if (!isSchedulerRunning) {
isSchedulerRunning = true;
requestHostCallback(schedulePerformWork);
}
}
function schedulePerformWork() {
// 3. 获取当前时间
const currentTime = getCurrentTime();
// 4. 计算剩余时间
const remainingTime = currentTime + expirationTime - currentTime;
// 5. 关键判断：如果时间不够了，就挂起
if (remainingTime <= 0) {
// 时间到了，让出主线程
requestHostCallback(schedulerCallback);
return;
}
// 6. 如果还有时间，就继续干活
requestAnimationFrame(renderLoop);
}
function renderLoop() {
// ... 执行 workLoopConcurrent ...
// 执行完后，再次检查 deadline
if (shouldYield()) {
// 浏览器忙，暂停，下次再来
requestAnimationFrame(renderLoop);
} else {
// 还有时间，继续
workLoopConcurrent();
}
}这段代码里蕴含着极深的哲学：“知止而后有定”。
React 不贪心。它不指望一口气把树渲染完，它只求在 5 毫秒内尽可能多干点活。如果干完了，太棒了；如果干不完，那就“挂起”，把控制权交还给浏览器。浏览器处理完用户的输入，再来唤醒 React。
这就是为什么你在 React 18 里可以一边打字一边看到输入框的内容实时更新，而不会出现“打字卡顿”的现象。
4. 优先级的动态调整
更高级的是，React 还支持抢占式调度。
假设你正在渲染一个巨大的列表（低优先级任务），这时候用户点击了一个按钮（高优先级任务）。React 会立刻停止渲染列表，把高优先级任务插队，渲染按钮，然后再回来继续渲染列表。
这就像你在洗碗（低优先级），突然电话响了（高优先级），你把碗一放，先接电话，挂了电话再回来继续洗碗。这就是优先级调度带来的用户体验提升。
第三乐章：内存复用——别扔掉旧家具，刷个漆就行
现在，我们有了分治法来拆解任务，有了优先级调度来安排时间。但是还有一个大问题：内存。
每次 setState，如果 React 都要创建一个新的虚拟 DOM 树，那内存会像黑洞一样瞬间爆炸。而且，频繁的垃圾回收（GC）会导致页面卡顿。
React 的解决方案是：内存复用。
1. Alternate 树：旧瓶装新酒
在 Fiber 架构中，React 始终维护着两棵树：
- Current Tree：当前已经渲染到屏幕上的那棵树。
- WorkInProgress Tree：正在构建中，准备渲染的那棵树。
这两棵树其实共享着几乎完全一样的节点。
这是怎么做到的？请看下面的代码逻辑，这是 React 源码中非常核心的一段逻辑：
function reconcileChildren(
currentFiber,
workInProgressFiber,
nextChildren,
renderLanes
) {
// 1. 判断是否有旧节点
if (currentFiber !== null) {
// 如果有旧节点，说明这是更新，我们要复用！
// workInProgressFiber.alternate 指向 currentFiber
workInProgressFiber.alternate = currentFiber;
} else {
// 如果没有旧节点，说明这是首次渲染，或者节点被删除了
workInProgressFiber.alternate = null;
}
// 2. 复用节点的核心逻辑
// 如果 alternate 存在，说明是更新，复用节点对象，只更新属性
if (workInProgressFiber.alternate !== null) {
workInProgressFiber.alternate.return = workInProgressFiber.return;
}
}这段代码的意思是：不要创建新对象！找到那个旧的 Fiber 节点，把它变成 alternate，然后填入新的 props。
想象一下，你家里有一张旧桌子（旧 Fiber 节点）。你想换个颜色。你不需要把桌子拆了扔掉，也不需要去买张新桌子。你只需要把桌子上的漆刷一刷（更新 memoizedProps），把桌腿修一修（更新 state）。
这就是内存复用的精髓。
2. 节点的“死亡”与重生
在渲染过程中，workInProgress 树会逐渐构建。当渲染完成后，workInProgress 树就变成了新的 current 树。
这时候，旧的 current 树怎么办？它变成了 alternate。
// 渲染完成后的处理
function commitRoot(root) {
// ... 提交 DOM 更新 ...
// 把 current 指向 workInProgress
root.finishedWork = null;
root.current = workInProgress;
// 旧的 current 树现在变成了 alternate，等待被回收（或者被复用到下一次渲染）
// React 会在下一次渲染时，通过 FiberNode.alternate 找到它
}这就像是玩俄罗斯方块。你刚拼好的一层（旧树），在下一局开始时，虽然位置变了，但底下的方块还是那些方块，你不需要重新生成方块，只需要在上面盖新的。
3. Memoization 的进一步应用
除了 Fiber 节点的复用，React 还在组件层面应用了内存复用的哲学，那就是 React.memo 和 useMemo。
const ExpensiveComponent = React.memo(function ExpensiveComponent(props) {
// 只有当 props 发生变化时，这个组件才会重新执行
// 否则，React 会直接复用上一次渲染的结果
return <div>{props.value}</div>;
});这本质上也是一种“复用”。如果输入没变，我就不重新计算，直接把上一次的结果给你。这极大地减少了 CPU 的计算压力和内存的分配压力。
第四乐章：三位一体——并发模式的终极形态
好了，我们把分治法、优先级调度、内存复用这三样东西都讲完了。现在，让我们把它们串起来，看看它们是如何在 React 源码中协同工作的。
这就像是一个精密的瑞士钟表。
- Scheduler（优先级调度） 是钟表的发条。它控制着时间的流速，决定什么时候该停，什么时候该冲。
- Fiber（分治法） 是钟表的齿轮组。它把庞大的动力分解成无数个微小的转动。
- Memory Reuse（内存复用） 是钟表的润滑油。它确保齿轮在转动时不会因为摩擦产生过热和磨损。
具体的渲染流程（源码级总结）
当你在 React 18 里调用 ReactDOM.render 或者 <App /> 开始渲染时：
- 初始化：React 创建一个
FiberRoot，并初始化current树为null。它创建了一个workInProgress树（空的）。 - 调度：
Scheduler被触发。它计算时间片，调用scheduleWork。 - 分治执行：
workLoopConcurrent开始运行。它调用performUnitOfWork。- 它遍历 Fiber 树。
- 它调用组件函数，生成新的子 Fiber 节点。
- 它检查
shouldYield()。如果时间到了，它就中断。 - 这时候，浏览器可以渲染已经完成的部分了！用户能看到“骨架屏”或者部分内容了。
- 优先级抢占：如果用户在这期间点击了按钮，
Scheduler会收到高优先级任务。它会强制中断当前的渲染循环，把高优先级任务插队。 - 内存复用：在生成新节点时，React 会查看
current.alternate。如果存在，它就复用该节点对象，只更新pendingProps。如果不存在，它才创建新节点。 - 完成：当
workInProgress树构建完毕，React 进入commit阶段。- 它一次性将所有变更应用到真实 DOM 上。
- 它将
workInProgress设为current，将旧的current设为alternate。
代码示例：一个完整的渲染周期模拟
为了让大家更直观地理解，我们写一段模拟代码，把这三者结合起来：
// 1. 模拟 Fiber 节点
class FiberNode {
constructor(type, props) {
this.type = type;
this.props = props;
this.child = null;
this.sibling = null;
this.return = null;
this.alternate = null; // 内存复用的关键
}
}
// 2. 模拟 Scheduler（优先级调度）
const Scheduler = {
currentExpirationTime: 0,
highPriorityExpiration: 1, // 比如用户点击的优先级
scheduleWork(root, priority) {
// 如果是高优先级，打断当前任务
if (priority === this.highPriorityExpiration) {
console.log("🚨 高优先级任务插入！中断当前渲染！");
this.render(root); // 立即执行
} else {
console.log("⏳ 低优先级任务加入队列，等待空闲...");
// 这里通常会有 requestIdleCallback 逻辑
}
},
render(root) {
console.log("🚀 开始渲染...");
let node = root;
let startTime = performance.now();
// 模拟分治法中的 workLoop
while (node) {
// 模拟处理节点
console.log(` 处理组件: ${node.type}`);
// 模拟内存复用：检查 alternate
if (node.alternate) {
console.log(` 💡 复用旧节点，更新 props: ${node.props}`);
} else {
console.log(` 🆕 创建新节点: ${node.type}`);
}
// 模拟时间切片：检查时间
if (performance.now() - startTime > 5) { // 假设 5ms 时间片
console.log("⏸️ 时间到，暂停渲染，让出主线程。");
return;
}
node = node.child; // 继续分治
}
console.log("✅ 渲染完成！");
}
};
// 3. 模拟分治法构建树
const nodeA = new FiberNode('A', { val: 1 });
const nodeB = new FiberNode('B', { val: 2 });
const nodeC = new FiberNode('C', { val: 3 });
nodeA.child = nodeB;
nodeB.sibling = nodeC;
// 4. 执行
Scheduler.scheduleWork(nodeA, 1); // 普通优先级
// 输出: ⏳ 低优先级任务加入队列，等待空闲...
// 🚀 开始渲染...
// 处理组件: A
// 🆕 创建新节点: A
// ⏸️ 时间到，暂停渲染，让出主线程。
setTimeout(() => {
console.log("n用户点击了按钮！");
Scheduler.scheduleWork(nodeA, 0); // 高优先级
}, 100);代码分析：
- 首先是低优先级，React 开始构建树，但只干了 5ms 就停了（模拟
shouldYield）。 - 然后高优先级来了，React 立即中断之前的进度，重新开始渲染。
- 在渲染过程中，它展示了如何创建新节点。
- 如果是更新，它会展示如何复用旧节点。
结语：设计哲学的升华
各位，讲了这么多代码，其实我们只是在描述现象。React 源码背后的设计哲学，远比代码本身更迷人。
分治法告诉我们：面对庞大而复杂的问题，不要试图一口吞下，要学会拆解。就像做菜，把大菜切成小丁，才能炒得均匀。
优先级调度告诉我们：资源永远是稀缺的。在有限的 CPU 时间里，我们要懂得取舍，要让重要的事情先做，要学会“让步”和“等待”。这不仅是编程，更是人生哲学。
内存复用告诉我们：不要总是追求“新”。旧的虽然旧，但它是熟悉的，是经过验证的。只要稍加改造，它依然能胜任新的工作。这叫作“极简主义”和“可持续性”。
React 的源码，本质上就是这三者完美的化学反应。它让 JavaScript 这个单线程语言，拥有了多线程般的响应速度，拥有了接近原生应用的流畅体验。
这就是为什么我们要读源码。不是为了去面试背题，而是为了理解这些设计哲学，当你在未来面对一个复杂的系统时，你也能像 React 团队一样，优雅地运用“分治”、“调度”和“复用”，去解决你自己的难题。
好了，今天的源码深潜就到这里。希望你们回去之后，再看 useState 和 useEffect 时，能看见它们背后那无数个 Fiber 节点在疯狂旋转，看见 Scheduler 在精确地掐着秒表。
祝你们编码愉快，永远不卡顿！