各位好，欢迎来到“React 源码深度解剖”研讨会。我是你们的讲解员，一个在代码丛林里摸爬滚打多年，头发虽然日渐稀疏但逻辑依然坚韧的资深工程师。
今天我们要聊的东西，听起来可能有点枯燥，甚至有点“底层”。但请记住，任何伟大的框架，其核心魅力都藏在最不起眼的细节里。我们今天的主角，是 React Fiber 架构中一个不起眼的小角色——Update（更新包）。
如果你以为 React 的 setState 就是一个简单的函数调用，那你就像以为“吃披萨”就是把饼扔进嘴里一样简单。在 React 的世界里，setState 只是发了一个“快递指令”，而真正的“Update”就是那个装着具体要换什么零件、什么时候换、换完要做什么的快递包裹。
我们今天不聊 UI 渲染，不聊虚拟 DOM，我们只聊这个包裹：Payload、Next 与 Callback。
准备好了吗？让我们把 React 的源码当成一块巨大的瑞士奶酪，开始挑刺。
一、 场景模拟：当用户点击按钮时
想象一下，你的页面有一个计数器。用户是个急性子，连续疯狂点击了 10 次“+1”按钮。
在 React 的 Fiber 视角下，发生了什么？
- 事件触发：浏览器捕获到了点击。
- 调度：React 调度器决定现在有空闲时间了，把任务丢给 Fiber 节点。
- 入队：Fiber 节点没有直接去渲染，而是把 10 个更新请求打包，扔进了Update Queue（更新队列）。
这个“Update Queue”里装的就是我们要讲的东西。每一个“Update”对象，都是一个独立的信息单元。它们像是一条链子上的珠子，串在一起。
让我们先看看这个 Update 对象的“身份证”长什么样。在 React 源码（以 Fiber 架构为主）中，它大致长这样：
// 这是一个简化版的 Update 结构，为了方便理解，去掉了繁琐的类型定义
interface Update {
// 1. 指向下一个更新包的指针，形成链表
next: Update | null;
// 2. 这个更新包的“内容”，也就是 Payload
payload: any;
// 3. 这是一个回调函数，更新提交后执行
callback: (() => void) | null;
// 4. 过期时间，决定了这个包是先吃还是后吃
expirationTime: number;
// 5. 优先级，虽然不直接在 Update 结构里，但由它决定
lane: number;
}看到这个结构，你可能会问：“这不就是个简单的对象吗？有什么好讲的？”
别急，朋友。这就好比你说“这只是一张纸”。但这张纸上写的不是字，而是 React 的命运。
二、 Payload：包裹里的“干货”
Payload，翻译过来就是“负载”或“载荷”。在 React 的语境下，它是 Update 对象最核心、最实打实的部分。它决定了当这个 Update 被处理时，React 要对 Fiber 节点做什么操作。
Payload 的类型非常丰富，它不仅仅是一个数字，它是一个指令集。React 源码中，payload 可能是一个对象，可能是一个函数，甚至可能是一个复杂的结构体。
1. Payload 作为“状态值”
这是最常见的情况。当你调用 setState({ count: 1 }) 时，Payload 就是那个 { count: 1 }。
在 React 内部，这个 Payload 被处理成不同的类型：
// 伪代码演示 Payload 的处理逻辑
function processPayload(payload, fiber) {
if (typeof payload === 'function') {
// 情况 A：Payload 是一个函数
// 比如 setState(prev => prev + 1)
// React 需要执行这个函数，传入当前状态，得到新的状态
const nextState = payload(fiber.memoizedState);
fiber.memoizedState = nextState;
} else if (typeof payload === 'object' && payload !== null) {
// 情况 B：Payload 是一个对象
// 比如 setState({ count: 1, name: 'Tom' })
// React 会合并这个对象到当前状态上
fiber.memoizedState = { ...fiber.memoizedState, ...payload };
} else {
// 情况 C：Payload 是原始值
// 比如 setState(10)
fiber.memoizedState = payload;
}
}幽默时刻：
你可以把 Payload 想象成你要寄给 Fiber 节点的体检报告。
- 如果 Payload 是个函数，就像是你让医生“根据你现在的症状，自己开个药方”。医生（React）会拿着你现在的症状（
memoizedState），去执行这个函数，得出一个新的症状（新状态）。 - 如果 Payload 是个对象，就像是你直接塞了一张纸条给医生，上面写着“体温39度，头痛”。医生不需要你现在的症状，直接把体温改了。
2. Payload 作为“EffectTag”
这可能是 Payload 最反直觉的地方。Payload 不仅仅是数据，它还包含副作用指令。
在 React 18 的并发模式下，payload 有时不仅仅是一个 value，它是一个包含 action 和 nextEffect 的复杂结构。但为了让你听懂，我们回到经典的 Fiber 模型。
当你调用 useEffect(() => { ... }, []) 时，React 并没有直接去执行这个函数。它把这个函数包装成一个 Update，Payload 里包含了一个特殊的标记（EffectTag）。
// 假设的结构
const effectPayload = {
type: 'effect',
tag: 'Insert', // 插入、更新或删除
create: () => console.log('useEffect 执行了'),
destroy: () => console.log('清理函数执行了')
};
// 在 Update 对象中
const update = {
payload: effectPayload,
next: null
};为什么这么设计？
因为 React 的渲染（Render Phase）是同步且可中断的。它不能在渲染过程中执行副作用（比如修改 DOM），因为那会破坏“只读”原则，并且容易导致状态混乱。
所以，React 把副作用指令（Payload 的一部分）打包好，扔进队列，等渲染完（Commit Phase），再拿出来执行。
3. Payload 作为“Props 更新”
当父组件更新 Props 传给子组件时，子组件 Fiber 节点也会收到一个 Update。这里的 Payload 就是新的 Props 对象。
// 父组件
function Parent() {
const [name, setName] = useState('React');
return <Child name={name} />;
}
// 子组件 Fiber
const childUpdate = {
payload: { name: 'React 18' }, // 新的 Props
next: null
};三、 Next：链表舞会
现在我们有了 Payload，但这还不够。用户疯狂点击了 10 次，意味着我们要处理 10 个 Update。如果这 10 个 Update 是孤立的，React 就得像一条贪吃蛇一样，一条一条去处理，效率极低。
为了解决这个问题，React 使用了链表结构，而这个链表的节点就是 Update 对象本身。
next 指针，就是这个链表里的“手”。
1. Update Queue（更新队列）
每一个 Fiber 节点（代表一个组件实例）都有一个 updateQueue。这是一个双端队列，或者说是一个链表。
当你调用 setState 时，React 会创建一个新的 Update 对象，然后把它的 next 指针指向队列的尾部。
// 伪代码：enqueueUpdate
function enqueueUpdate(fiber, update) {
const queue = fiber.updateQueue;
// 如果队列是空的，或者它是最后一个节点
if (queue === null || queue.last === null) {
// 这是一个全新的队列
queue = {
first: update,
last: update,
stores: null // ... 其他属性
};
fiber.updateQueue = queue;
} else {
// 把新 Update 接在队尾
// update.next = null (默认)
queue.last.next = update;
queue.last = update;
}
}图解 Next 的作用：
想象一下，你正在整理一堆乱七八糟的快递单。
[Update 1] --(next)--> [Update 2] --(next)--> [Update 3] --(next)--> null
^ |
|______________________________ |
(next)- Update 1：第一个收到的，扔在队头。
- Update 2：第二个收到的，挂在 Update 1 后面。
- Update 3：第三个收到的，挂在 Update 2 后面。
2. Next 指针的妙用：高优先级更新与“插队”
在 React 18 的并发模式下，next 指针的用途变得更加高级了。它不仅仅是用来串起来，它还用来过滤和排序。
想象一下，你正在吃面条（执行低优先级的更新），突然老板喊你处理一份紧急文件（高优先级更新）。
React 的调度器会检查 expirationTime（过期时间）。如果有一个高优先级的 Update 被插入到队列中，React 会把这个高优先级的 Update 移动到队列的头部。
这就是为什么 next 指针这么重要。React 不需要重新构建整个链表，只需要修改几个指针的指向：
// 伪代码：高优先级更新插队
function moveUpdateToQueueHead(queue, update) {
// 1. 找到 update 前面的那个节点
let previousUpdate = null;
let currentUpdate = queue.first;
while (currentUpdate !== update) {
previousUpdate = currentUpdate;
currentUpdate = currentUpdate.next;
}
// 2. 如果 update 已经在头部，不需要动
if (previousUpdate === null) return;
// 3. 断开 update
previousUpdate.next = update.next;
// 4. 把 update 接到头部
update.next = queue.first;
queue.first = update;
}幽默时刻：
next 指针就像是幼儿园小朋友排队拉手。本来大家排得好好的，突然来了一个插队的小胖子。大家不需要都散开，只需要把小胖子拉到最前面，然后小胖子把手拉在他后面那个小朋友的手上。这就是 next 指针的魔法。
3. Next 指针与 Fiber 树的同步
更高级的用法是，next 指针不仅存在于 Update Queue 中，还指向 Fiber 树上的兄弟节点。
在 FiberNode 结构中，有一个 nextEffect 指针。当 Update 被处理并决定要执行副作用时，它会将副作用添加到 nextEffect 链表中。这个链表在 Commit 阶段遍历，用来批量执行 DOM 操作。
所以，next 指针贯穿了两个世界：
- Update Queue：用于调度和合并状态。
- Effect List：用于执行副作用。
四、 Callback：事后的“总结报告”
最后，我们来看看 callback。这是一个非常容易被忽视，但功能强大的指针。
1. Callback 的触发时机
callback 什么时候执行？不是在渲染的时候，而是在渲染完成之后。
在 React 的生命周期中，有两个主要阶段：
- Render Phase：计算状态，生成新的树。这个阶段是同步的，不能有副作用。
- Commit Phase：把计算结果应用到 DOM。这个阶段可以执行副作用。
callback 就是在 Commit Phase 结束后，DOM 更新完毕之后执行的。
2. 应用场景：useLayoutEffect
这是 callback 最经典的应用场景。useLayoutEffect 需要在浏览器绘制屏幕之前执行，并且要同步执行。
为了实现这个需求，React 把 useLayoutEffect 的回调函数包装在一个特殊的 Update 里。
// React 内部处理 useLayoutEffect 的逻辑
function commitLayoutEffectOnFiber(fiber) {
const update = fiber.updateQueue.last; // 获取最后一个 Update
if (update && update.callback) {
// 执行 Callback
update.callback();
}
}为什么不在 useEffect 里做这件事？
因为 useEffect 是在浏览器绘制之后执行的。如果你在 useEffect 里通过 useRef 修改 DOM 的样式，用户会先看到一个闪烁的瞬间（布局变了，样式还没变），然后样式才变回来。这叫“布局抖动”，用户体验很差。
而 useLayoutEffect 配合 callback，确保了在浏览器把屏幕画出来之前，DOM 已经被调整好了。
3. 应用场景：setState 的回调
你一定写过这样的代码：
setState({ count: 1 }, () => {
console.log('更新完成了！');
// 这里可以访问最新的 DOM
document.getElementById('myDiv').style.color = 'red';
});这个 () => { ... } 就是 callback。
const update = {
payload: { count: 1 },
next: null,
callback: () => { console.log('更新完成了！') }
};4. 应用场景：useTransition 的回调
在 React 18 的 useTransition 中，startTransition 接受的回调函数也是通过 Update 的 callback 机制来执行的。
当低优先级的更新完成后，React 会调用这个回调，告诉开发者：“嘿，低优先级任务做完了，你可以开始做高优先级任务了。”
幽默时刻：
你可以把 callback 想象成公司的“下班打卡”。
Render Phase 是大家都在加班干活（计算状态），Commit Phase 是把做好的成果贴在墙上（更新 DOM）。
callback 就是打卡机。大家贴完墙，走出大门，“滴”的一声，打卡机响了：“任务完成，下班回家！”
callback 确保了只有当所有脏活累活都干完了，才会触发这个“下班”信号。
五、 深度解析：Update 的生命周期与 Fiber 的交互
现在，让我们把这些点连成一条线。Update 不仅仅是一个静态对象，它是在 React 运行时动态流转的。
1. 创建与入队
当组件调用 setState 时，React 会调用 enqueueUpdate。
// 简化的 React 源码逻辑
function enqueueSetState(fiber, payload, callback) {
// 1. 创建一个 Update 对象
const update = {
expirationTime: requestCurrentTime(), // 计算过期时间
priorityLevel: getCurrentPriorityLevel(), // 计算优先级
payload: payload,
next: null,
callback: callback
};
// 2. 把 Update 加入到 Fiber 的队列中
enqueueUpdate(fiber, update);
// 3. 调度渲染
scheduleRootUpdate();
}2. 处理与过滤
在 performUnitOfWork（工作单元执行）阶段，React 会从 updateQueue 中取出 Update。
function processUpdateQueue(fiber) {
const queue = fiber.updateQueue;
// 3.1 遍历链表
let newBaseState = fiber.memoizedState;
let firstUpdate = queue.first;
// 3.2 移除已经处理过的 Update
// React 会把处理过的 Update 从链表里摘掉（或者放到一个单独的队列里）
// 这样可以保持队列的长度相对稳定，避免无限增长
queue.first = firstUpdate.next;
// 3.3 处理 Payload
while (firstUpdate !== null) {
const payload = firstUpdate.payload;
const action = payload;
// 处理逻辑...
if (typeof action === 'function') {
newBaseState = action(newBaseState);
} else {
newBaseState = { ...newBaseState, ...action };
}
firstUpdate = firstUpdate.next;
}
// 3.4 处理 Callback
// 注意：Callback 通常是在 Commit 阶段执行的，但在某些老版本或特定逻辑中，
// 它可能在这里被缓存起来。
fiber.memoizedState = newBaseState;
}关键点： React 处理完 Update 后，通常会把它从队列中移除（或者标记为已处理）。这意味着 next 指针就像是一个“已读”标记。如果一个 Update 被丢弃了（比如被批处理合并了），它的 next 指针可能指向 null，或者指向一个被标记为“已过期”的节点。
3. 提交与 Callback 执行
在 Commit 阶段，React 会遍历 Effect List。
function commitWork(fiber) {
// ... 生成 DOM 的代码 ...
// 最后，执行 Callback
if (fiber.updateQueue && fiber.updateQueue.callback) {
const callback = fiber.updateQueue.callback;
fiber.updateQueue.callback = null; // 执行后清空
// 执行回调
callback();
}
}六、 进阶话题：Payload 的复杂性与 EagerState
为了真正深入，我们得聊聊 React 18 引入的一个新特性：Eager State（急切状态）。
在旧版 React 中，每次 setState 都会创建一个 Update 对象。但在某些情况下，React 可以直接计算出新状态，而不需要等到渲染阶段。
比如，你有一个状态 count，你连续调用了三次 setState(count + 1)。React 可以直接把 count 加 3，存入 eagerState，而根本不需要创建 3 个 Update 对象。
interface Update {
// ...
// 新增：EagerState，用于存储直接计算出的结果
eagerState: any;
// ...
}这是为了性能优化。如果 next 指针指向一个 eagerState，React 就可以直接使用这个值，跳过复杂的链表遍历逻辑。
幽默时刻：
以前，每次你喊“加个蛋”，老板都要让你写张单子（Create Update）。
现在，你喊“加个蛋”，老板直接拿起笔在账本上写个“+1”（EagerState）。只有当你喊得特别快，老板来不及记账时，他才会让你写单子（Create Update）。
七、 总结：Update 包的哲学
通过上面的讲解，我们拆解了 React Fiber 更新包的三个核心要素：
- Payload（载荷）：这是 Update 的灵魂。它承载了数据、指令、副作用。它告诉 React：“嘿，兄弟，我这里有个新数据，或者我这里有个副作用要执行。”
- Next（指针）：这是 Update 的骨架。它将孤立的更新串联成队列，形成链表结构。它让 React 能够管理批量更新、优先级调度，以及处理高并发场景下的任务切片。
- Callback（回调）：这是 Update 的尾巴。它确保了副作用在 DOM 更新后、在浏览器重绘前执行，保证了用户体验的流畅性。
这三个指针共同协作，构成了 React 响应式系统的基石。
当你下次点击按钮，看到界面飞快地更新时，请不要只看到那个帅气的动画。请想象一下，在 React 的底层，成千上万个 Update 对象正通过 next 指针排着队，把 payload 里的指令传达到每一个 Fiber 节点，最后在 callback 的指挥下，完美地重塑了整个 DOM 树。
这不仅仅是代码，这是工程的艺术。
好了，今天的讲座就到这里。希望大家回去后，再看到 setState 时，能透过那简单的函数调用，看到背后那个繁忙的、充满逻辑与美感的 Update 队列。下课！