把一系列 state 更新加入队列 | Queueing a Series of State Updates

React 会对 state 更新进行批处理 | React batches state updates

You might expect that clicking the “+3” button will increment the counter three times because it calls setNumber(number + 1) three times: 在下面的示例中，你可能会认为点击 “+3” 按钮会使计数器递增三次，因为它调用了 setNumber(number + 1) 三次：

However, as you might recall from the previous section, each render’s state values are fixed, so the value of number inside the first render’s event handler is always 0, no matter how many times you call setNumber(1): 但是，你可能还记得上一节中的内容，每一次渲染的 state 值都是固定的，因此无论你调用多少次 setNumber(1)，在第一次渲染的事件处理函数内部的 number 值总是 0 ：

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

But there is one other factor at play here. React waits until all code in the event handlers has run before processing your state updates. This is why the re-render only happens after all these setNumber() calls. 但是这里还有另外一个影响因素需要讨论。React 会等到事件处理函数中的 所有 代码都运行完毕再处理你的 state 更新。 这就是重新渲染只会发生在所有这些 setNumber() 调用 之后 的原因。

This might remind you of a waiter taking an order at the restaurant. A waiter doesn’t run to the kitchen at the mention of your first dish! Instead, they let you finish your order, let you make changes to it, and even take orders from other people at the table. 这可能会让你想起餐厅里帮你点菜的服务员。服务员不会在你说第一道菜的时候就跑到厨房！相反，他们会让你把菜点完，让你修改菜品，甚至会帮桌上的其他人点菜。

This lets you update multiple state variables—even from multiple components—without triggering too many re-renders. But this also means that the UI won’t be updated until after your event handler, and any code in it, completes. This behavior, also known as batching, makes your React app run much faster. It also avoids dealing with confusing “half-finished” renders where only some of the variables have been updated. 这让你可以更新多个 state 变量——甚至来自多个组件的 state 变量——而不会触发太多的 重新渲染。但这也意味着只有在你的事件处理函数及其中任何代码执行完成 之后，UI 才会更新。这种特性也就是 批处理，它会使你的 React 应用运行得更快。它还会帮你避免处理只​​更新了一部分 state 变量的令人困惑的“半成品”渲染。

React does not batch across multiple intentional events like clicks—each click is handled separately. Rest assured that React only does batching when it’s generally safe to do. This ensures that, for example, if the first button click disables a form, the second click would not submit it again. React 不会跨 多个 需要刻意触发的事件（如点击）进行批处理——每次点击都是单独处理的。请放心，React 只会在一般来说安全的情况下才进行批处理。这可以确保，例如，如果第一次点击按钮会禁用表单，那么第二次点击就不会再次提交它。

在下次渲染前多次更新同一个 state | Updating the same state multiple times before the next render

It is an uncommon use case, but if you would like to update the same state variable multiple times before the next render, instead of passing the next state value like setNumber(number + 1), you can pass a function that calculates the next state based on the previous one in the queue, like setNumber(n => n + 1). It is a way to tell React to “do something with the state value” instead of just replacing it. 这是一个不常见的用例，但是如果你想在下次渲染之前多次更新同一个 state，你可以像 setNumber(n => n + 1) 这样传入一个根据队列中的前一个 state 计算下一个 state 的 函数，而不是像 setNumber(number + 1) 这样传入 下一个 state 值。这是一种告诉 React “用 state 值做某事”而不是仅仅替换它的方法。

Try incrementing the counter now: 现在尝试递增计数器：

Here, n => n + 1 is called an updater function. When you pass it to a state setter: 在这里，n => n + 1 被称为 更新函数。当你将它传递给一个 state 设置函数时：

1. React queues this function to be processed after all the other code in the event handler has run.
2. React 会将此函数加入队列，以便在事件处理函数中的所有其他代码运行后进行处理。
3. During the next render, React goes through the queue and gives you the final updated state.
4. 在下一次渲染期间，React 会遍历队列并给你更新之后的最终 state。

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

Here’s how React works through these lines of code while executing the event handler: 下面是 React 在执行事件处理函数时处理这几行代码的过程：

1. setNumber(n => n + 1): n => n + 1 is a function. React adds it to a queue.

• setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。

2. setNumber(n => n + 1): n => n + 1 is a function. React adds it to a queue.

• setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。

3. setNumber(n => n + 1): n => n + 1 is a function. React adds it to a queue.

• setNumber(n => n + 1)：n => n + 1 是一个函数。React 将它加入队列。

When you call useState during the next render, React goes through the queue. The previous number state was 0, so that’s what React passes to the first updater function as the n argument. Then React takes the return value of your previous updater function and passes it to the next updater as n, and so on: 当你在下次渲染期间调用 useState 时，React 会遍历队列。之前的 number state 的值是 0，所以这就是 React 作为参数 n 传递给第一个更新函数的值。然后 React 会获取你上一个更新函数的返回值，并将其作为 n 传递给下一个更新函数，以此类推：

React stores 3 as the final result and returns it from useState. React 会保存 3 为最终结果并从 useState 中返回。

This is why clicking “+3” in the above example correctly increments the value by 3. 这就是为什么在上面的示例中点击“+3”正确地将值增加“+3”。

如果你在替换 state 后更新 state 会发生什么 | What happens if you update state after replacing it

What about this event handler? What do you think number will be in the next render? 这个事件处理函数会怎么样？你认为 number 在下一次渲染中的值是什么？

<button onClick={() => {
  setNumber(number + 5);
  setNumber(n => n + 1);
}}>

Here’s what this event handler tells React to do: 这是事件处理函数告诉 React 要做的事情：

1. setNumber(number + 5): number is 0, so setNumber(0 + 5). React adds “replace with 5” to its queue.

• setNumber(number + 5)：number 为 0，所以 setNumber(0 + 5)。React 将 “替换为 5” 添加到其队列中。

2. setNumber(n => n + 1): n => n + 1 is an updater function. React adds that function to its queue.

• setNumber(n => n + 1)：n => n + 1 是一个更新函数。 React 将 该函数 添加到其队列中。

During the next render, React goes through the state queue: 在下一次渲染期间，React 会遍历 state 队列：

React stores 6 as the final result and returns it from useState. React 会保存 6 为最终结果并从 useState 中返回。

如果你在更新 state 后替换 state 会发生什么 | What happens if you replace state after updating it

Let’s try one more example. What do you think number will be in the next render? 让我们再看一个例子。你认为 number 在下一次渲染中的值是什么？

<button onClick={() => {
  setNumber(number + 5);
  setNumber(n => n + 1);
  setNumber(42);
}}>

Here’s how React works through these lines of code while executing this event handler: 以下是 React 在执行事件处理函数时处理这几行代码的过程：

1. setNumber(number + 5): number is 0, so setNumber(0 + 5). React adds “replace with 5” to its queue.

• setNumber(number + 5)：number 为 0，所以 setNumber(0 + 5)。React 将 “替换为 5” 添加到其队列中。

2. setNumber(n => n + 1): n => n + 1 is an updater function. React adds that function to its queue.

• setNumber(n => n + 1)：n => n + 1 是一个更新函数。React 将该函数添加到其队列中。

3. setNumber(42): React adds “replace with 42” to its queue.

• setNumber(42)：React 将 “替换为 42” 添加到其队列中。

During the next render, React goes through the state queue: 在下一次渲染期间，React 会遍历 state 队列：

Then React stores 42 as the final result and returns it from useState. 然后 React 会保存 42 为最终结果并从 useState 中返回。

To summarize, here’s how you can think of what you’re passing to the setNumber state setter: 总而言之，以下是你可以考虑传递给 setNumber state 设置函数的内容：

• An updater function (e.g. n => n + 1) gets added to the queue.
• 一个更新函数（例如：n => n + 1）会被添加到队列中。
• Any other value (e.g. number 5) adds “replace with 5” to the queue, ignoring what’s already queued.
• 任何其他的值（例如：数字 5）会导致“替换为 5”被添加到队列中，已经在队列中的内容会被忽略。

After the event handler completes, React will trigger a re-render. During the re-render, React will process the queue. Updater functions run during rendering, so updater functions must be pure and only return the result. Don’t try to set state from inside of them or run other side effects. In Strict Mode, React will run each updater function twice (but discard the second result) to help you find mistakes. 事件处理函数执行完成后，React 将触发重新渲染。在重新渲染期间，React 将处理队列。更新函数会在渲染期间执行，因此 更新函数必须是 纯函数 并且只 返回 结果。不要尝试从它们内部设置 state 或者执行其他副作用。在严格模式下，React 会执行每个更新函数两次（但是丢弃第二个结果）以便帮助你发现错误。

命名惯例 | Naming conventions

It’s common to name the updater function argument by the first letters of the corresponding state variable: 通常可以通过相应 state 变量的第一个字母来命名更新函数的参数：

setEnabled(e => !e);
setLastName(ln => ln.reverse());
setFriendCount(fc => fc * 2);

If you prefer more verbose code, another common convention is to repeat the full state variable name, like setEnabled(enabled => !enabled), or to use a prefix like setEnabled(prevEnabled => !prevEnabled). 如果你喜欢更冗长的代码，另一个常见的惯例是重复使用完整的 state 变量名称，如 setEnabled(enabled => !enabled)，或使用前缀，如 setEnabled(prevEnabled => !prevEnabled)。