React Hooks 的 useState 与 useReducer 的内部共享状态调度原理

1. 背景与问题描述

在 React 函数组件中，多个 Hooks（如 useState、useReducer）可能同时触发更新，但 React 需要确保它们的更新顺序一致且避免重复渲染。那么，React 如何管理这些 Hooks 的更新？如何保证在一次渲染中多个 Hooks 的状态更新被合并处理？

2. Hooks 的存储结构：Fiber 节点中的 Hooks 链表

• 每个函数组件对应一个 Fiber 节点，Fiber 的 memoizedState 字段指向一个 Hooks 链表。
• 每个 Hook（如 useState）对应链表中的一个节点，包含：
  • baseState：基础状态（用于计算更新）。
  • queue：更新队列（存储多次 setState 动作）。
  • next：指向下一个 Hook。

3. 状态更新的调度过程

步骤 1：更新触发

当调用 setState 或 dispatch 时，React 会：

1. 创建更新对象（Update），包含动作（如新状态或 reducer 参数）。
2. 将更新对象添加到 Hook 的队列中（环形链表结构，方便追加和遍历）。
3. 标记 Fiber 节点需要更新（通过 scheduleUpdateOnFiber 触发调度）。

步骤 2：调度器协调更新

• React 调度器（Scheduler）会合并同一事件循环中的更新，避免频繁渲染。
• 例如，多次 setState 在合成事件中被批量处理（自动批处理）。

步骤 3：渲染阶段处理更新

当组件进入渲染阶段（Render Phase）：

1. React 遍历 Fiber 节点的 Hooks 链表，依次处理每个 Hook 的更新队列。
2. 对于 useState/useReducer：
   • 基于 baseState 和队列中的更新动作，计算最终状态。
   • 更新后的状态写入 Hook 的 memoizedState 字段。
3. 所有 Hooks 按声明顺序执行，确保状态依赖正确（依赖 Hooks 调用顺序的规则）。

4. 关键机制：共享调度上下文

• 同一组件的多个 Hooks 的更新共享同一个 Fiber 节点的更新队列（Update Queue）。
• 调度器通过优先级标记（Lane 模型）决定更新顺序，高优先级更新可中断低优先级任务。
• 最终状态计算是同步的（在渲染阶段），但更新触发是异步的（被调度器管理）。

5. 示例说明

function Counter() {  
  const [count, setCount] = useState(0);  
  const [text, setText] = useState('');  

  const handleClick = () => {  
    setCount(c => c + 1); // 更新 1  
    setText('Updated');    // 更新 2  
  };  
  // 两次更新被合并：渲染阶段依次处理 count 和 text 的队列。  
}  

6. 总结

• Hooks 的状态更新通过 Fiber 节点的链表结构存储，确保顺序性。
• 调度器批量处理更新，减少渲染次数。
• 渲染阶段按顺序计算最终状态，保证一致性。