React Router
React 18+ 源码深度解读/React 高级特性

自动批处理

深入理解 React 18 自动批处理机制的实现原理，包括批处理机制、flushSync 和事件系统中的批处理

自动批处理

React 18 引入了自动批处理（Automatic Batching），它能够自动将多个状态更新合并成一次重新渲染，提升应用性能。本文将深入分析自动批处理的实现原理。

🎯 核心概念

什么是批处理？

批处理是指将多个状态更新合并成一次重新渲染的过程。在 React 18 之前，批处理只在事件处理函数中自动生效，而在 Promise、setTimeout 等异步操作中需要手动处理。

React 18 的改进

React 18 引入了自动批处理，使得所有状态更新（包括异步操作中的更新）都能自动批处理，无需手动干预。

🔍 源码实现分析

1. 批处理机制源码分析

// packages/react-reconciler/src/ReactFiberWorkLoop.js

// 批处理配置 - 控制批处理的行为模式
const ReactCurrentBatchConfig = {
  transition: 0, // 0 表示同步更新，1 表示过渡更新（低优先级）
};

// 批处理状态标志 - 全局状态管理
let isBatchingUpdates = false;        // 是否正在批处理普通更新
let isUnbatchingUpdates = false;      // 是否正在取消批处理（用于 flushSync）
let isBatchingEventUpdates = false;   // 是否正在批处理事件更新

// 核心批处理函数 - 包装执行函数并启用批处理
function batchedUpdates<A, R>(fn: A => R, a: A): R {
  // 保存当前批处理状态，用于恢复
  const prevIsBatchingUpdates = isBatchingUpdates;
  // 启用批处理模式
  isBatchingUpdates = true;
  
  try {
    // 执行传入的函数，此时所有状态更新都会被收集而不是立即执行
    return fn(a);
  } finally {
    // 恢复之前的批处理状态
    isBatchingUpdates = prevIsBatchingUpdates;
    // 如果不在批处理中且不在渲染中，立即刷新同步回调队列
    if (!isBatchingUpdates && !isRendering) {
      flushSyncCallbacks();
    }
  }
}

// 事件批处理函数 - 专门处理事件触发的更新
function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
  // 保存当前事件批处理状态
  const prevIsBatchingEventUpdates = isBatchingEventUpdates;
  // 启用事件批处理模式
  isBatchingEventUpdates = true;
  
  try {
    // 调用通用批处理函数
    return batchedUpdates(fn, a);
  } finally {
    // 恢复之前的事件批处理状态
    isBatchingEventUpdates = prevIsBatchingEventUpdates;
  }
}

源码解读要点：

  1. 状态管理机制：通过三个布尔标志控制不同的批处理状态，确保状态更新的原子性
  2. 嵌套批处理支持：通过保存和恢复状态，支持嵌套的批处理调用
  3. 自动刷新机制：当批处理结束时，自动检查是否需要刷新同步回调队列
  4. 事件特殊处理：事件更新有独立的批处理标志，便于调试和性能监控

2. flushSync 实现原理

// packages/react-reconciler/src/ReactFiberWorkLoop.js

// 强制同步刷新函数 - 绕过批处理机制
function flushSync<A, R>(fn: A => R, a: A): R {
  // 保存当前批处理状态
  const prevIsBatchingUpdates = isBatchingUpdates;
  const prevIsUnbatchingUpdates = isUnbatchingUpdates;
  
  // 强制禁用批处理，启用取消批处理模式
  isBatchingUpdates = false;      // 禁用批处理
  isUnbatchingUpdates = true;     // 启用取消批处理模式
  
  try {
    // 立即执行函数，状态更新会同步处理
    return fn(a);
  } finally {
    // 恢复之前的批处理状态
    isBatchingUpdates = prevIsBatchingUpdates;
    isUnbatchingUpdates = prevIsUnbatchingUpdates;
    
    // 如果不在批处理中且不在渲染中，立即刷新同步回调队列
    if (!isBatchingUpdates && !isRendering) {
      flushSyncCallbacks();
    }
  }
}

// 同步回调队列 - 存储需要立即执行的回调
const syncQueue: Array<SchedulerCallback> = [];
let isFlushingSyncQueue = false;  // 防止重复刷新的标志

// 添加同步回调到队列
function scheduleSyncCallback(callback: SchedulerCallback): void {
  syncQueue.push(callback);
}

// 刷新同步回调队列 - 立即执行所有同步回调
function flushSyncCallbacks(): void {
  // 防止重复刷新，确保队列不为空
  if (!isFlushingSyncQueue && syncQueue.length !== 0) {
    isFlushingSyncQueue = true;
    let i = 0;
    
    try {
      const isSync = true;  // 标记为同步执行
      const queue = syncQueue;
      
      // 遍历并执行所有回调
      for (; i < queue.length; i++) {
        let callback = queue[i];
        // 支持链式回调（callback 返回下一个回调）
        do {
          callback = callback(isSync);
        } while (callback !== null);
      }
      
      // 清空队列
      syncQueue.length = 0;
    } catch (error) {
      // 错误处理 - 重新抛出错误
      throw error;
    } finally {
      // 重置刷新标志
      isFlushingSyncQueue = false;
    }
  }
}

源码解读要点：

  1. 强制同步机制：flushSync 通过禁用批处理标志，强制状态更新立即执行
  2. 状态隔离：使用 isUnbatchingUpdates 标志区分正常的批处理和强制同步模式
  3. 回调链支持：同步回调可以返回下一个回调，形成执行链
  4. 防重复刷新：通过 isFlushingSyncQueue 标志防止队列被重复处理
  5. 错误边界：使用 try-catch 确保即使出错也能正确重置状态

3. 事件系统中的批处理

// packages/react-dom/src/events/ReactDOMEventListener.js

// 事件分发入口 - 处理所有 DOM 事件
function dispatchEvent(
  domEventName: DOMEventName,        // 事件名称（如 'click', 'change'）
  eventSystemFlags: EventSystemFlags, // 事件系统标志（捕获/冒泡等）
  targetContainer: EventTarget,       // 事件目标容器
  nativeEvent: AnyNativeEvent,        // 原生 DOM 事件对象
): void {
  // 从事件池中获取 React 事件对象，避免频繁创建
  const event = getEventFromPool(nativeEvent);
  
  // 设置事件系统内部标志，用于后续处理
  event._reactName = domEventName;      // 事件名称
  event._reactName = eventSystemFlags;  // 事件标志
  
  // 关键：使用批处理包装事件处理，确保事件中的状态更新被批处理
  batchedEventUpdates(() => {
    dispatchEventsForPlugins(
      domEventName,
      eventSystemFlags,
      nativeEvent,
      return_targetInst,
      targetContainer,
    );
  });
}

// 插件事件分发 - 实现 React 的事件系统
function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,    // 目标 Fiber 节点
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent);
  const targetFiber = targetInst;
  
  // 构建事件路径 - 从目标节点到根节点的路径
  const eventPath = [];
  let instance = targetFiber;
  
  // 向上遍历 Fiber 树，构建完整的事件路径
  while (instance) {
    eventPath.push(instance);
    instance = getParent(instance);
  }
  
  // 捕获阶段 - 从根节点向下到目标节点
  for (let i = eventPath.length - 1; i >= 0; i--) {
    const listener = getListener(eventPath[i], domEventName);
    if (listener) {
      // 调用事件监听器，传入当前 Fiber 节点作为 this 上下文
      listener.call(eventPath[i], nativeEvent);
    }
  }
  
  // 冒泡阶段 - 从目标节点向上到根节点
  for (let i = 0; i < eventPath.length; i++) {
    const listener = getListener(eventPath[i], domEventName);
    if (listener) {
      // 调用事件监听器，传入当前 Fiber 节点作为 this 上下文
      listener.call(eventPath[i], nativeEvent);
    }
  }
}

源码解读要点：

  1. 事件池优化：使用事件池复用事件对象，减少内存分配和垃圾回收
  2. 批处理集成：所有事件处理都被 batchedEventUpdates 包装，确保自动批处理
  3. 事件路径构建：通过向上遍历 Fiber 树构建完整的事件传播路径
  4. 捕获冒泡实现：分别处理捕获阶段（向下）和冒泡阶段（向上）
  5. 上下文绑定：使用 call 方法确保事件监听器在正确的 Fiber 节点上下文中执行

4. 状态更新队列

// packages/react-reconciler/src/ReactFiberHooks.js

// useState 的 dispatch 函数 - 处理状态更新请求
function dispatchSetState<S, A>(
  fiber: Fiber,           // 当前 Fiber 节点
  queue: UpdateQueue<S, A>, // 更新队列
  action: A,              // 更新动作（函数或值）
): void {
  // 请求更新优先级车道，用于并发特性
  const lane = requestUpdateLane(fiber);
  
  // 创建更新对象
  const update: Update<S, A> = {
    lane,                 // 更新优先级
    action,               // 更新动作
    hasEagerState: false, // 是否已计算急切状态
    eagerState: null,     // 急切计算的状态值
    next: (null: any),    // 指向下一个更新的指针
  };

  // 检查是否在渲染阶段更新
  if (isRenderPhaseUpdate(fiber)) {
    // 在渲染阶段：直接加入渲染阶段更新队列，立即处理
    enqueueRenderPhaseUpdate(queue, update);
  } else {
    // 在事件处理或其他阶段：加入普通更新队列，等待批处理
    enqueueUpdate(fiber, update, lane);
    // 调度 Fiber 更新，可能触发重新渲染
    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}

// 将更新加入队列 - 实现环形链表结构
function enqueueUpdate<State>(
  fiber: Fiber,
  update: Update<State>,
  lane: Lane,
): void {
  const updateQueue = fiber.updateQueue;
  
  // 如果队列不存在，创建新的更新队列
  if (updateQueue === null) {
    fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
  }
  
  // 获取共享队列和待处理更新
  const sharedQueue = updateQueue.shared;
  const pending = sharedQueue.pending;
  
  if (pending === null) {
    // 第一个更新：形成自环
    update.next = update;
  } else {
    // 后续更新：插入到环形链表中
    update.next = pending.next;  // 新更新指向第一个更新
    pending.next = update;       // 当前待处理更新指向新更新
  }
  
  // 更新待处理指针
  sharedQueue.pending = update;
}

源码解读要点：

  1. 优先级系统：通过 requestUpdateLane 分配更新优先级，支持并发特性
  2. 更新对象结构：每个更新包含优先级、动作、急切状态等完整信息
  3. 渲染阶段检测：区分渲染阶段和事件阶段的更新处理方式
  4. 环形链表队列：使用环形链表存储更新，支持高效的插入和遍历
  5. 急切状态优化：某些情况下可以预先计算状态值，避免重复计算

5. 批处理检测

// packages/react-reconciler/src/ReactFiberWorkLoop.js

// 检查是否正在批处理中 - 决定是否立即执行更新
function isBatchingUpdates(): boolean {
  // 检查普通批处理或事件批处理是否激活
  return isBatchingUpdates || isBatchingEventUpdates;
}

// 检查是否在渲染阶段更新 - 影响更新处理策略
function isRenderPhaseUpdate(fiber: Fiber): boolean {
  return (
    // 检查当前 Fiber 是否是正在渲染的 Fiber
    fiber === currentlyRenderingFiber ||
    // 或者检查其备用 Fiber 是否是正在渲染的 Fiber
    (alternate !== null && alternate === currentlyRenderingFiber)
  );
}

// 检查是否在提交阶段 - 防止在 DOM 更新期间进行状态更新
function isCommitting(): boolean {
  return isCommitting$1;  // 全局提交阶段标志
}

源码解读要点：

  1. 批处理状态检查：通过检查全局批处理标志决定更新是否立即执行
  2. 渲染阶段检测：识别更新是否发生在组件渲染过程中，影响处理策略
  3. Fiber 备用检查：同时检查当前 Fiber 和备用 Fiber，支持并发渲染
  4. 提交阶段保护：防止在 DOM 更新期间进行状态更新，确保数据一致性
  5. 状态决策机制：这些检查函数是 React 更新策略的核心决策点

🎯 实际应用示例

1. 自动批处理示例

// React 18 自动批处理
function AutomaticBatchingExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  const handleClick = () => {
    // 这些更新会自动批处理，只触发一次重新渲染
    setCount(c => c + 1);
    setFlag(f => !f);
  };
  
  const handleAsyncClick = async () => {
    // 异步操作中的更新也会自动批处理
    await new Promise(resolve => setTimeout(resolve, 100));
    setCount(c => c + 1);
    setFlag(f => !f);
  };
  
  const handlePromiseClick = () => {
    // Promise 中的更新也会自动批处理
    Promise.resolve().then(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
    });
  };
  
  return (
    <div>
      <p>Count: {count}, Flag: {flag.toString()}</p>
      <button onClick={handleClick}>同步更新</button>
      <button onClick={handleAsyncClick}>异步更新</button>
      <button onClick={handlePromiseClick}>Promise 更新</button>
    </div>
  );
}

2. 使用 flushSync

// 使用 flushSync 强制同步更新
function FlushSyncExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  const handleImmediateUpdate = () => {
    // 这些更新会立即执行，不会批处理
    flushSync(() => {
      setCount(c => c + 1);
      setFlag(f => !f);
    });
    
    // 这里可以立即访问更新后的状态
    console.log('Count updated immediately');
  };
  
  const handleNormalUpdate = () => {
    // 这些更新会批处理
    setCount(c => c + 1);
    setFlag(f => !f);
    
    // 这里可能还是旧的状态
    console.log('Count might not be updated yet');
  };
  
  return (
    <div>
      <p>Count: {count}, Flag: {flag.toString()}</p>
      <button onClick={handleImmediateUpdate}>立即更新</button>
      <button onClick={handleNormalUpdate}>正常更新</button>
    </div>
  );
}

3. 自定义批处理 Hook

// 自定义批处理 Hook
function useBatchedUpdates() {
  const [updates, setUpdates] = useState([]);
  const [isBatching, setIsBatching] = useState(false);
  
  const batchUpdate = useCallback((updateFn) => {
    if (!isBatching) {
      setIsBatching(true);
      
      // 使用 flushSync 确保立即执行
      flushSync(() => {
        updateFn();
      });
      
      setIsBatching(false);
    } else {
      // 在批处理中，添加到队列
      setUpdates(prev => [...prev, updateFn]);
    }
  }, [isBatching]);
  
  const flushUpdates = useCallback(() => {
    if (updates.length > 0) {
      flushSync(() => {
        updates.forEach(update => update());
      });
      setUpdates([]);
    }
  }, [updates]);
  
  return { batchUpdate, flushUpdates, isBatching };
}

// 使用示例
function CustomBatchingExample() {
  const [count, setCount] = useState(0);
  const { batchUpdate, flushUpdates } = useBatchedUpdates();
  
  const handleMultipleUpdates = () => {
    // 批量执行多个更新
    batchUpdate(() => {
      setCount(c => c + 1);
      setCount(c => c + 1);
      setCount(c => c + 1);
    });
  };
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleMultipleUpdates}>批量更新</button>
      <button onClick={flushUpdates}>刷新队列</button>
    </div>
  );
}

4. 性能监控

// 监控批处理性能
function useBatchMonitor() {
  const [batchCount, setBatchCount] = useState(0);
  const [updateCount, setUpdateCount] = useState(0);
  
  useEffect(() => {
    if (__DEV__) {
      const originalBatchedUpdates = batchedUpdates;
      
      batchedUpdates = function(fn, a) {
        setBatchCount(prev => prev + 1);
        return originalBatchedUpdates.call(this, fn, a);
      };
      
      const originalDispatchSetState = dispatchSetState;
      
      dispatchSetState = function(fiber, queue, action) {
        setUpdateCount(prev => prev + 1);
        return originalDispatchSetState.call(this, fiber, queue, action);
      };
      
      return () => {
        batchedUpdates = originalBatchedUpdates;
        dispatchSetState = originalDispatchSetState;
      };
    }
  }, []);
  
  return { batchCount, updateCount };
}

🚀 性能优化技巧

1. 合理使用批处理

// ✅ 正确：让 React 自动批处理
function GoodExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  const handleClick = () => {
    // 让 React 自动批处理
    setCount(c => c + 1);
    setFlag(f => !f);
  };
  
  return <button onClick={handleClick}>更新</button>;
}

// ❌ 错误：手动强制同步更新
function BadExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  
  const handleClick = () => {
    // 强制同步更新，失去批处理的好处
    flushSync(() => {
      setCount(c => c + 1);
    });
    flushSync(() => {
      setFlag(f => !f);
    });
  };
  
  return <button onClick={handleClick}>更新</button>;
}

2. 异步操作中的批处理

// ✅ 正确：React 18 自动批处理异步更新
function AsyncExample() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  
  const fetchData = async () => {
    setLoading(true);
    
    try {
      const result = await fetch('/api/data');
      const json = await result.json();
      
      // React 18 会自动批处理这些更新
      setData(json);
      setLoading(false);
    } catch (error) {
      setData(null);
      setLoading(false);
    }
  };
  
  return (
    <div>
      {loading && <div>加载中...</div>}
      {data && <div>{JSON.stringify(data)}</div>}
      <button onClick={fetchData}>获取数据</button>
    </div>
  );
}

3. 事件处理中的批处理

// ✅ 正确：事件处理中的自动批处理
function EventExample() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  
  const handleMouseMove = (event) => {
    // 这些更新会自动批处理
    setX(event.clientX);
    setY(event.clientY);
  };
  
  return (
    <div onMouseMove={handleMouseMove}>
      <p>鼠标位置: ({x}, {y})</p>
    </div>
  );
}

🔧 源码机制总结

批处理流程概览

graph TD
    A[事件触发] --> B[dispatchEvent]
    B --> C[batchedEventUpdates]
    C --> D[batchedUpdates]
    D --> E[执行事件处理函数]
    E --> F[dispatchSetState]
    F --> G[enqueueUpdate]
    G --> H[更新队列]
    H --> I[批处理结束]
    I --> J[flushSyncCallbacks]
    J --> K[执行更新]

核心机制解析

  1. 状态管理机制

    • 使用三个全局标志控制批处理状态
    • 支持嵌套批处理调用
    • 确保状态更新的原子性

  2. 更新队列机制

    • 环形链表结构存储更新
    • 支持优先级调度
    • 区分渲染阶段和事件阶段更新

  3. 事件系统集成

    • 所有事件处理自动启用批处理
    • 事件池优化性能
    • 支持捕获和冒泡阶段

  4. 强制同步机制

    • flushSync 绕过批处理
    • 同步回调队列管理
    • 错误边界保护

关键数据结构

// 更新对象结构
interface Update<S, A> {
  lane: Lane;              // 优先级车道
  action: A;               // 更新动作
  hasEagerState: boolean;  // 是否已计算急切状态
  eagerState: S | null;    // 急切计算的状态
  next: Update<S, A> | null; // 链表指针
}

// 更新队列结构
interface UpdateQueue<S, A> {
  baseState: S;            // 基础状态
  firstBaseUpdate: Update<S, A> | null; // 第一个基础更新
  lastBaseUpdate: Update<S, A> | null;  // 最后一个基础更新
  shared: {
    pending: Update<S, A> | null;       // 待处理更新
  };
  effects: Array<Update<S, A>> | null;  // 副作用更新
}

📝 总结

React 18 的自动批处理通过以下机制实现：

  1. 全局批处理状态：通过 isBatchingUpdates 和 isBatchingEventUpdates 控制
  2. 更新队列：将多个更新收集到队列中，统一处理
  3. flushSync：提供强制同步更新的机制
  4. 事件系统集成：在事件处理中自动启用批处理

自动批处理的优势：

  • 性能提升：减少不必要的重新渲染
  • 简化代码：无需手动管理批处理
  • 一致性：所有更新都遵循相同的批处理规则
  • 向后兼容：现有代码无需修改

理解自动批处理有助于我们：

  • 编写更高效的 React 组件
  • 避免不必要的性能问题
  • 在需要时使用 flushSync 强制同步更新
  • 更好地理解 React 的更新机制

下一步：渲染流程分析 - 深入分析 React 的渲染流程

React 高级特性

React 18+ 高级特性，包括并发特性、自动批处理、事件系统等新功能

并发特性分析

深入理解 React 18 并发特性的实现原理，包括 Concurrent Mode、startTransition、useTransition 等