将一系列状态更新加入队列

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>
    </>
  )
}

每个渲染的状态值都是固定的，因此无论您调用setNumber（1）多少次，第一个渲染的事件处理程序中的number值始终为0：

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

更新函数

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

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

这里，n => n + 1被称为更新函数。当你将它传递给状态设置器时：

以下是 React 在执行事件处理程序时如何执行这些代码行的：

setNumber(n => n + 1):n => n + 1是一个函数。React 将其添加到队列中。
setNumber(n => n + 1):n => n + 1是一个函数。React 将其添加到队列中。
setNumber(n => n + 1):n => n + 1是一个函数。React 将其添加到队列中。

如果在替换状态后更新状态会发生什么情况

结果是 6

import { useState } from 'react';

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

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 5);
        setNumber(n => n + 1);
      }}>Increase the number</button>
    </>
  )
}

如果在更新状态后替换状态会发生什么情况

结果是 42

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