React state 更新队列 - 事件处理程序中如何批量处理 state 更新

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

翻译自：beta.reactjs.org/learn/queue…

设置 state 的值引起另一个 render 队列。但有时你可能希望执行下一次 render 队列之前对值执行多个操作。为了这样做，这篇文章有助于了解 React 如何批量更新状态。

你将会学习到：

什么是“批量处理（batching）”，React 如何使用它来处理多个 state 更新
如何在一行中对同样的 state 应用几个更新

React 批量更新 state

你可能会认为点击“+3”按钮会使计数器的值增加三次，因为它调用了 setNumber(number + 1) 三次：

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>+3</button>
    </>
  )
}
复制代码

但是，您可能还记得之前里的内容，每个渲染的 state 值都是固定的，因此第一个渲染的事件处理程序中的 number 值始终为 0，无论您调用 setNumber(1) 多少次：

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);
复制代码

但这里还有一个因素需要讨论。React 等待事件处理程序中的所有代码运行后再处理 state 更新。这就是为什么重新渲染只发生在所有这些 setNumber() 调用之后。

这可能会让你想起在餐厅点菜的服务员。服务员不会一听到你点的第一道菜就跑到厨房!相反，他们让你完成你的订单，让你修改它，甚至接受桌子上其他人的订单。

这允许您更新多个 state 变量 —— 甚至来自多个组件 —— 而不会触发太多的重新 render。但这也意味着，在事件处理程序和其中的任何代码完成之前，UI 不会更新。这种行为，也称为批量处理，使你的 React 应用运行得更快。它还避免了处理令人困惑的“半成品”呈现，只有其中的一些变量被更新。

React 不会跨多个意图事件(如单击)进行批量处理 —— 每个单击都是单独处理的。请放心，React 只在一般情况下是安全的情况下进行批量处理。这可以确保比如，如果第一次单击按钮禁用了一个表单，那么第二次单击不会再次提交它。

React state 更新队列 - 事件处理程序中如何批量处理 state 更新

React 批量更新 state

Guess you like