React 调度器如何合并更新（批处理）

小小小小宇2025-04-23 11:39

深入探讨 React 调度器（Scheduler）是如何合并更新（也称为批处理，Batching）的。再次强调，React 的真实调度器与并发特性紧密相关，涉及优先级（Lanes）、时间分片等极其复杂的机制。我们将通过一个高度简化但能阐明核心合并思想的模拟实现来讲解，并尽可能提供详尽的代码和注释。

核心目标：为什么需要合并更新？

想象一下，在一个事件处理函数中，你连续调用了三次 setState：

javascript 复制代码 
function handleClick() {
  setCount(c => c + 1); // 更新 1
  setName(n => n + '!'); // 更新 2
  setIsActive(false);    // 更新 3
}

如果每次 setState 都立即触发一次完整的组件重新渲染（包括 VDOM diff 和 DOM 操作），那将会非常低效：

  1. 性能开销： 三次独立的渲染意味着三次 VDOM 计算、三次 diff、可能的三次 DOM 更新。
  2. 中间状态： 用户可能会短暂地看到只应用了部分更新的不一致状态（虽然在现代浏览器事件循环中这通常不会发生，但逻辑上是可能的）。

React 的目标是：将短时间内发生的多个状态更新"合并"起来，只进行一次渲染，以提高性能并保证状态更新的一致性。

合并更新的关键：延迟执行与任务队列

React 调度器实现合并更新的核心思想是延迟处理 和任务队列：

  1. 接收更新请求： 当调用 setState 时，它并不会立即执行渲染。相反，它会：

    • 将这个更新操作（比如新的 state 值或更新函数）放入一个与该组件相关的更新队列中。
    • 通知调度器："嘿，这个组件有更新了，请安排一次渲染工作。"

  2. 调度渲染工作： 调度器收到通知后，并不会马上开始渲染。它会检查：

    • 当前是否已经在处理渲染工作？
    • 是否有更高优先级的任务？
    • 是否可以等待一小段时间（比如当前宏任务或微任务结束时）来收集更多可能发生的更新？
    • 它会将"执行渲染工作"这个任务 本身放入一个任务队列 中，通常利用浏览器的微任务队列（如 queueMicrotask 或 Promise.resolve().then()）或宏任务队列（如 setTimeout(0) 或 MessageChannel，取决于具体场景和优先级）。

  3. 执行渲染工作（合并点）： 当浏览器事件循环执行到调度器安排的那个"执行渲染工作"任务时：

    • 调度器会查看所有被标记为需要更新的组件。
    • 对于每个需要更新的组件，它会处理该组件更新队列中积累的所有更新。
    • 基于所有更新计算出最终的状态。
    • 执行一次组件的渲染逻辑。
    • 最终进行 VDOM diff 和 DOM 提交。

模拟实现：一个简化的调度器

我们将创建一个 SimplifiedReactScheduler 对象来模拟这个过程。

tsx 复制代码 
// --- 类型定义 ---

// 代表一个组件的简化标识
type ComponentId = number | string;

// 代表一次状态更新操作
interface Update<S = any> {
  componentId: ComponentId;
  // 更新可以是新值，也可以是 (prevState => newState) 的函数
  payload: S | ((prevState: S) => S);
  // 在真实 React 中，这里会有优先级 (Lane) 等信息
  // timestamp: number; // 记录更新请求时间，有助于调试
}

// 代表一个组件的状态和更新队列
interface ComponentStateInfo<S = any> {
  currentState: S;
  pendingUpdates: Update<S>[]; // 存储待处理的更新
  renderFn: (props: any, state: S) => any; // 模拟组件的渲染函数
  props: any;
}

// --- 简化的调度器实现 ---

const ReactSchedulerSimulator = (() => {
  // 存储所有组件的状态和待处理更新
  // Key: ComponentId, Value: ComponentStateInfo
  const componentRegistry = new Map<ComponentId, ComponentStateInfo>();

  // 存储在当前批次中需要更新的组件 ID
  const dirtyComponentIds = new Set<ComponentId>();

  // 标记是否已经安排了一次 "performWork" 任务
  let isWorkLoopScheduled = false;

  // 标记当前是否正在执行 "performWork" 循环，防止重入
  let isPerformingWork = false;

  /**
   * 注册一个组件（模拟组件挂载）
   */
  function registerComponent<S>(
    id: ComponentId,
    initialState: S,
    renderFn: (props: any, state: S) => any,
    initialProps: any
  ) {
    if (componentRegistry.has(id)) {
      console.warn(`[Scheduler] 组件 ${id} 已注册，将覆盖.`);
    }
    console.log(`[Scheduler] 注册组件 ${id}，初始状态:`, initialState);
    componentRegistry.set(id, {
      currentState: initialState,
      pendingUpdates: [],
      renderFn: renderFn,
      props: initialProps,
    });
  }

  /**
   * 模拟 useState 返回的 setState 函数
   * 这是更新的入口点
   */
  function dispatchUpdate<S>(componentId: ComponentId, updatePayload: S | ((prevState: S) => S)) {
    const componentInfo = componentRegistry.get(componentId);
    if (!componentInfo) {
      console.error(`[Scheduler] 尝试更新未注册的组件 ${componentId}`);
      return;
    }

    console.log(`[Scheduler] 收到组件 ${componentId} 的更新请求:`, updatePayload);

    const newUpdate: Update<S> = {
      componentId: componentId,
      payload: updatePayload,
      // timestamp: Date.now()
    };

    // 1. 将更新加入组件的待处理队列
    componentInfo.pendingUpdates.push(newUpdate);
    console.log(`[Scheduler]   更新已加入 ${componentId} 的队列，当前队列长度: ${componentInfo.pendingUpdates.length}`);

    // 2. 将组件标记为需要更新
    dirtyComponentIds.add(componentId);
    console.log(`[Scheduler]   组件 ${componentId} 已标记为 dirty`);

    // 3. 安排渲染工作（如果尚未安排）
    scheduleWorkLoop();
  }

  /**
   * 安排执行 "performWork" 的任务
   * 利用微任务队列 (queueMicrotask) 来模拟 React 的行为
   * 同一个事件循环中的多次 dispatchUpdate 只会安排一次 work loop
   */
  function scheduleWorkLoop() {
    // 如果当前正在执行工作，或者已经安排了工作，则不重复安排
    if (isPerformingWork || isWorkLoopScheduled) {
      console.log(`[Scheduler] 工作循环已安排或正在执行，跳过本次 scheduleWorkLoop`);
      return;
    }

    isWorkLoopScheduled = true;
    console.log(`[Scheduler] 准备安排 performWork 到微任务队列...`);

    // 使用 queueMicrotask 确保 performWork 在当前同步代码执行完毕后、
    // 下一个宏任务（如 setTimeout）或 UI 渲染之前执行。
    // 这使得在同一个事件处理函数中的所有 dispatchUpdate 都能被收集。
    queueMicrotask(() => {
      console.log(`\n L> [Microtask] 微任务回调触发，即将执行 performWork`);
      performWork();
      console.log(` L> [Microtask] performWork 执行完毕`);
    });
  }

  /**
   * 执行实际的渲染工作循环
   * 这是合并更新发生的地方
   */
  function performWork() {
    // 如果没有安排工作，或者正在执行，则退出（理论上不应发生，作为保护）
    if (!isWorkLoopScheduled || isPerformingWork) {
      console.warn("[Scheduler] performWork 异常调用，退出");
      return;
    }

    console.log(`\n===== [Scheduler] 开始执行 performWork 循环 =====`);
    isPerformingWork = true; // 标记开始工作
    isWorkLoopScheduled = false; // 重置调度标记

    // 复制需要处理的组件 ID 集合，以防在处理过程中有新的更新加入
    const componentsToUpdate = new Set(dirtyComponentIds);
    dirtyComponentIds.clear(); // 清空脏集，准备下一轮

    console.log(`[Scheduler] 本次循环需要处理 ${componentsToUpdate.size} 个组件:`, Array.from(componentsToUpdate));

    componentsToUpdate.forEach(componentId => {
      const componentInfo = componentRegistry.get(componentId);
      if (!componentInfo) {
        console.error(`[Scheduler] 处理工作时未找到组件 ${componentId}`);
        return;
      }

      const updatesToProcess = componentInfo.pendingUpdates;
      componentInfo.pendingUpdates = []; // 清空当前组件的待处理队列

      if (updatesToProcess.length === 0) {
        console.log(`[Scheduler] 组件 ${componentId} 没有待处理更新（可能已被处理或取消），跳过`);
        return;
      }

      console.log(`[Scheduler] ---> 开始处理组件 ${componentId} 的 ${updatesToProcess.length} 个更新`);

      // --- 合并逻辑的核心 ---
      // 基于当前状态，按顺序应用队列中的所有更新
      let previousState = componentInfo.currentState;
      let nextState = previousState;

      updatesToProcess.forEach((update, index) => {
        console.log(`[Scheduler]   应用更新 #${index + 1}:`, update.payload);
        if (typeof update.payload === 'function') {
          try {
            // 函数式更新
            nextState = (update.payload as Function)(previousState);
            console.log(`[Scheduler]     函数式更新结果:`, nextState);
          } catch (error) {
            console.error(`[Scheduler]     更新函数执行出错 for ${componentId}:`, error);
            // 在真实 React 中，这里会涉及错误边界处理
            // 这里简单地保持状态不变或进行某种回退
            nextState = previousState; // 保持上一个状态
          }
        } else {
          // 值更新
          nextState = update.payload;
          console.log(`[Scheduler]     值更新结果:`, nextState);
        }
        // 为下一个函数式更新准备 "previousState"
        // 注意：React 内部处理函数式更新时，传递给下一个更新函数的 prevState
        // 是上一个更新计算后的结果，而不是本次渲染开始时的状态。
        previousState = nextState;
      });

      console.log(`[Scheduler] ---> 组件 ${componentId} 所有更新处理完毕，最终状态:`, nextState);

      // 比较状态是否真的改变 (React 的优化点，称为 bailout)
      if (Object.is(componentInfo.currentState, nextState)) {
        console.log(`[Scheduler] ---> 组件 ${componentId} 状态未改变，跳过渲染 (Bailout)`);
      } else {
        // 状态改变，更新内部状态并模拟渲染
        componentInfo.currentState = nextState;
        console.log(`[Scheduler] ---> 组件 ${componentId} 状态已更新，模拟执行渲染函数...`);
        try {
          // 模拟调用组件的渲染函数
          const renderOutput = componentInfo.renderFn(componentInfo.props, componentInfo.currentState);
          console.log(`[Scheduler] ---> 组件 ${componentId} 渲染输出 (模拟):`, renderOutput);
          // 在真实 React 中，这里会进行 VDOM diff 和 commit 阶段
        } catch (error) {
          console.error(`[Scheduler] 组件 ${componentId} 渲染函数执行出错:`, error);
          // 错误边界处理
        }
      }
    });

    console.log(`===== [Scheduler] performWork 循环结束 =====\n`);
    isPerformingWork = false; // 标记工作结束

    // 检查在 performWork 执行期间是否有新的更新被调度进来
    if (dirtyComponentIds.size > 0) {
      console.log(`[Scheduler] 在 performWork 期间有新的更新被调度，重新安排工作循环`);
      scheduleWorkLoop(); // 如果有，则再次安排一次 work loop
    }
  }

  // --- 公开 API ---
  return {
    registerComponent,
    dispatchUpdate,
    // 暴露一些内部状态供调试查看 (非 React API)
    _getComponentState: (id: ComponentId) => componentRegistry.get(id)?.currentState,
    _getPendingUpdatesCount: (id: ComponentId) => componentRegistry.get(id)?.pendingUpdates.length ?? 0,
    _getDirtyComponents: () => new Set(dirtyComponentIds),
    _isWorkLoopScheduled: () => isWorkLoopScheduled,
    _isPerformingWork: () => isPerformingWork,
  };
})();

// --- 模拟组件和使用 ---

// 模拟一个计数器组件的渲染函数
function CounterRenderFn(props: { initialLabel: string }, state: { count: number }) {
  console.log(`   [RenderFn] Counter (ID: ${props.initialLabel}) Rendering with count: ${state.count}`);
  return `Counter ${props.initialLabel}: ${state.count}`;
}

// 模拟一个用户信息组件的渲染函数
function UserInfoRenderFn(props: any, state: { name: string; age: number }) {
  console.log(`   [RenderFn] UserInfo (ID: user) Rendering with name: ${state.name}, age: ${state.age}`);
  return `User: ${state.name}, Age: ${state.age}`;
}

// 注册组件
ReactSchedulerSimulator.registerComponent<{ count: number }>(
  'counter1',
  { count: 0 },
  CounterRenderFn,
  { initialLabel: 'A' }
);
ReactSchedulerSimulator.registerComponent<{ count: number }>(
  'counter2',
  { count: 10 },
  CounterRenderFn,
  { initialLabel: 'B' }
);
ReactSchedulerSimulator.registerComponent<{ name: string; age: number }>(
  'user',
  { name: 'Alice', age: 30 },
  UserInfoRenderFn,
  {}
);

// --- 场景 1: 同一个事件处理函数中的多次更新 (会被合并) ---
console.log("\n====== 场景 1: 同步多次更新 (模拟事件处理器) ======");
function simulateEventHandler() {
  console.log("--- EventHandler Start ---");
  ReactSchedulerSimulator.dispatchUpdate<{ count: number }>('counter1', (prevState) => ({ count: prevState.count + 1 }));
  ReactSchedulerSimulator.dispatchUpdate<{ count: number }>('counter1', (prevState) => ({ count: prevState.count + 1 })); // 再次更新 counter1
  ReactSchedulerSimulator.dispatchUpdate<{ name: string; age: number }>('user', (prevState) => ({ ...prevState, age: prevState.age + 1 }));
  ReactSchedulerSimulator.dispatchUpdate<{ count: number }>('counter2', { count: 15 }); // 更新 counter2
  console.log("--- EventHandler End --- (performWork 将在微任务中执行)");
}
simulateEventHandler();

// --- 场景 2: 使用 setTimeout 模拟稍后的更新 (会触发新的渲染批次) ---
console.log("\n====== 场景 2: 延迟更新 (setTimeout) ======");
setTimeout(() => {
  console.log("\n--- setTimeout Callback Start ---");
  ReactSchedulerSimulator.dispatchUpdate<{ count: number }>('counter1', (prevState) => ({ count: prevState.count + 10 }));
  ReactSchedulerSimulator.dispatchUpdate<{ name: string; age: number }>('user', { name: 'Bob', age: 32 });
  console.log("--- setTimeout Callback End --- (新的 performWork 将在微任务中执行)");
}, 50); // 延迟 50ms

// --- 场景 3: 在渲染过程中触发更新 (模拟 useEffect 或特殊情况) ---
// 这在真实 React 中需要小心处理，可能导致循环或意外行为
// 我们的简化调度器通过 isPerformingWork 标志来防止直接重入，
// 但新的更新会被标记，并在当前 work loop 结束后再次调度。
function TriggerUpdateDuringRenderRenderFn(props: any, state: { value: number }) {
    console.log(`   [RenderFn] TriggerUpdate (ID: trigger) Rendering with value: ${state.value}`);
    // 在渲染过程中意外（或有意）触发了更新
    if (state.value < 5) { // 加个条件防止无限循环
        console.log(`   [RenderFn] Triggering update from within render...`);
        // 注意：这会调度一个新的更新，但当前的 performWork 会继续完成
        ReactSchedulerSimulator.dispatchUpdate<{ value: number }>('trigger', (prev) => ({ value: prev.value + 1 }));
    }
    return `Trigger Value: ${state.value}`;
}
ReactSchedulerSimulator.registerComponent<{ value: number }>(
    'trigger',
    { value: 0 },
    TriggerUpdateDuringRenderRenderFn,
    {}
);

console.log("\n====== 场景 3: 触发渲染中更新 ======");
ReactSchedulerSimulator.dispatchUpdate<{ value: number }>('trigger', { value: 1 });


// --- 查看最终状态 (需要等待 setTimeout 完成) ---
setTimeout(() => {
    console.log("\n====== 最终状态检查 (等待所有异步完成) ======");
    console.log("Counter 1 State:", ReactSchedulerSimulator._getComponentState('counter1')); // 预期: { count: 12 } (0 + 1 + 1 + 10)
    console.log("Counter 2 State:", ReactSchedulerSimulator._getComponentState('counter2')); // 预期: { count: 15 }
    console.log("User State:", ReactSchedulerSimulator._getComponentState('user'));       // 预期: { name: 'Bob', age: 32 } (30 + 1, 然后被 {name:'Bob', age:32} 覆盖)
    console.log("Trigger State:", ReactSchedulerSimulator._getComponentState('trigger'));   // 预期: { value: 5 } (1 -> render -> update(2) -> render -> update(3) -> ... -> render -> update(5) -> render)
}, 100); // 等待足够长的时间

代码讲解与合并逻辑分析

  1. componentRegistry : 存储每个组件的当前状态 (currentState) 和一个待处理更新的数组 (pendingUpdates)。这是状态和更新的"家"。

  2. dirtyComponentIds : 一个 Set，用来快速记录哪些组件在当前的事件循环（或更广泛地说，在下一次渲染工作开始前）收到了至少一个更新请求。Set 自动处理重复，一个组件多次调用 dispatchUpdate 也只会被记录一次。

  3. dispatchUpdate(componentId, updatePayload) :

    • 核心入口 : 模拟 setState。
    • 入队 : 将 updatePayload 包装成 Update 对象，放入对应组件的 pendingUpdates 数组中。此时不计算状态。
    • 标记 : 将 componentId 加入 dirtyComponentIds。
    • 调度 : 调用 scheduleWorkLoop。

  4. scheduleWorkLoop() :

    • 防重入/重复调度 : 使用 isPerformingWork 和 isWorkLoopScheduled 标志确保 performWork 不会被重复安排或在执行时被打断。
    • 延迟机制 : 使用 queueMicrotask 将 performWork 的执行推迟到当前同步代码块之后。这是合并的关键 ：在 simulateEventHandler 中，所有的 dispatchUpdate 调用都会在 queueMicrotask 的回调执行之前完成。它们都会将各自的更新放入队列并标记组件，但 scheduleWorkLoop 只会成功安排一次 performWork。

  5. performWork() :

    • 批处理执行点: 这是真正处理更新和执行渲染的地方。

    • 获取脏组件 : 从 dirtyComponentIds 复制需要处理的组件列表。

    • 遍历处理: 对每个脏组件：

      • 获取其 pendingUpdates 队列中的所有更新。
      • 清空该组件的 pendingUpdates 队列。
      • 合并计算 : 从 componentInfo.currentState 开始，按顺序应用队列中的每一个更新 ，计算出最终的 nextState。函数式更新会基于上一个更新的结果来计算。
      • 状态比较与渲染 : 如果 nextState 与 currentState 不同，则更新 currentState 并调用模拟的 renderFn。

    • 循环后检查 : 如果在 performWork 执行期间（例如，在 renderFn 内部）又触发了新的 dispatchUpdate，dirtyComponentIds 会再次包含内容，此时会再次调用 scheduleWorkLoop 安排下一轮处理。

总结：调度器如何合并更新

  1. 延迟执行 : setState (或 dispatchUpdate) 不直接触发渲染，而是将更新放入队列。
  2. 任务调度 : 使用微任务（如 queueMicrotask）将实际的渲染工作 (performWork) 推迟到当前同步代码执行完毕后。
  3. 单一工作循环 : 利用标志位 (isWorkLoopScheduled) 确保在同一事件循环（或微任务批次）中只安排一次渲染工作循环。
  4. 队列处理 : 在渲染工作循环 (performWork) 中，处理每个脏组件时，会处理其队列中积累的所有待处理更新，计算出最终状态。
  5. 一次渲染: 基于计算出的最终状态，对每个需要更新的组件执行一次渲染逻辑。

这个机制确保了即使你在短时间内触发了大量状态更新，React 也能高效地将它们合并到最少次数的渲染中，通常是一次。React 18 的自动批处理进一步扩展了这种行为，使得在 Promise、setTimeout、原生事件处理器等异步操作中的多次更新也能被自动合并。

相关推荐
码客前端1 分钟前
css图片设为灰色
前端·javascript·css
艾恩小灰灰18 分钟前
CSS中的`transform-style`属性：3D变换的秘密武器
前端·css·3d·css3·html5·web开发·transform-style
Captaincc20 分钟前
AI coding的隐藏王者，悄悄融了2亿美金
前端·后端·ai编程
天天扭码23 分钟前
一分钟解决一道算法题——矩阵置零
前端·算法·面试
抹茶san35 分钟前
el-tabs频繁切换tab引发的数据渲染混淆
前端·vue.js·element
Captaincc39 分钟前
关于MCP最值得看的一篇：MCP创造者聊MCP的起源、架构优势和未来
前端·mcp
小小小小宇43 分钟前
记录老项目Vue 2使用VueUse
前端
vvilkim43 分钟前
React Server Components 深度解析：下一代 React 渲染模式
前端·react.js·前端框架
HBR666_1 小时前
vue3 excel文件导入
前端·excel
天天扭码1 小时前
偶遇天才算法题 | 拼劲全力，无法战胜 😓
前端·算法·面试
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05DeepSeek各版本说明与优缺点分析06RAG 实践- Ollama+RagFlow 部署本地知识库07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）