第十六章：批处理更新 —— 遥控器指令队列

1 分钟 133 字第 38 / 962 个阅读单元

React 不是你点一下按钮，它就立刻把 DOM 一行一行改掉。它更像先把指令收进队列，再统一刷新面板。

tsx

function RemoteControl() {
  const [temp, setTemp] = useState(26);

  const handleTurboCool = () => {
    setTemp(t => t - 1);
    setTemp(t => t - 1);
    setTemp(t => t - 1);
  };

  return <button onClick={handleTurboCool}>一键强冷</button>;
}

上面点一次，温度会从 26 -> 23，因为 React 会把这三条更新批处理。

如果这样写：

tsx

setTemp(temp - 1);
setTemp(temp - 1);
setTemp(temp - 1);

结果通常只会减一次。因为这三次都读到的是同一个旧值。

核心判断：

text

当新值依赖旧值时，优先用函数式更新：
setX(prev => ...)