深入理解React setState回调的多次执行：事件批处理与状态一致性

admin 百科 2025-12-13 13

本文探讨react 18中，当多个独立事件（如onmousedown和onfocus）在短时间内触发状态更新时，setstate回调函数可能被多次执行的现象。我们将分析react的事件批处理机制，特别是其不跨越不同意图事件的特性，以及如何通过丢弃陈旧结果来确保最终状态的一致性，强调updater函数纯粹性的重要性。

在React应用开发中，我们通常期望setState的更新函数（updater function）在一次状态更新周期中只被执行一次。然而，在特定场景下，尤其是在React 18的自动批处理机制下，当多个“有意图的事件”（intentional events）在短时间内连续触发状态更新时，我们可能会观察到setState的更新函数被多次执行，即使没有开启严格模式（Strict Mode）。这种行为可能导致开发者困惑，但实际上是React内部机制为了确保状态一致性而采取的策略。

场景复现与现象分析

考虑以下React组件代码，其中包含两个状态state和state2，并通过useEffect和onFocus事件处理器触发setState更新：

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

function App() {
  const [state, setState] = useState([]);
  const [state2, setState2] = useState(0);

  // 用于记录渲染迭代次数
  const render = useRef(0);
  render.current++;

  useEffect(() => {
    if (state2) {
      console.log(render.current, performance.now(), "effect");
      setState(s => {
        console.log(render.current, performance.now(), "effect setState", s);
        return [...s, "effect"];
      });
    }
  }, [state2]);

  return (
    <input
      onMouseDown={() => {
        console.log(render.current, performance.now(), "mousedown");
        setState2(1);
      }}
      onFocus={() => {
        console.log(render.current, performance.now(), "focus");
        setState(s => {
          console.log(render.current, performance.now(), "focus setState", s);
          return [...s, "focus"];
        });
      }}
    />
  );
}

登录后复制

当用户点击元素时，onMouseDown事件会先于onFocus事件触发。我们期望的控制台输出可能是：

effect
focus
effect setState []
focus setState ['effect']

登录后复制

深入理解React setState回调的多次执行：事件批处理与状态一致性-第2张图片-佛山资讯网

然而，实际的控制台输出（可能略有不同，但核心行为一致）会是：

1 2971 "mousedown" 
2 2974 "effect" 
2 2978 "focus" 
3 2978 "focus setState" [] // 第一次执行，基于旧的state
4 2982 "effect setState" []
4 2982 "focus setState" (1) ["effect"] // 第二次执行，基于更新后的state

登录后复制

从上述输出中可以看到，"focus setState"的日志出现了两次，其中第一次的s是空数组[]，而第二次的s是['effect']。这表明onFocus中的setState更新函数被执行了两次，并且第二次执行时接收到了由useEffect更新后的正确状态。