在 React setState 钩子函数中传递值和传递回调有什么区别？

What's the difference between passing a value and passing a callback in a React setState hook function?

假设我使用 React hook 声明了一个本地状态 useState() :

const [count, setCount] = useState(0);

稍后我想更新状态并触发重新渲染：

  1. 通过传值设置状态
<button onClick={() => setCount(count+1)}
  1. 通过回调设置状态
<button onClick={() => setCount((prev_count) => prev_count+1)}

这两种更新有什么区别？

  1. 传递回调将使您能够通过回调函数参数访问当前状态 setCount((curr_count) => curr_count+1)。
  2. 如果您的状态更新是批处理的，使用 setCount(count+1) 中的状态值将为您提供陈旧状态，您可能会访问以前的状态。

在这里它没有任何区别，但是一旦您的应用程序变得更大并且您在许多地方使用了 count，则有可能会发生多个 setState 调用并排队数据将呈现给 DOM，因此 count 的实际值可能与您的想法不同。

这正是建议在回调中使用先前状态的原因。 prevState 始终是一个可靠的解决方案，无需跟踪每个状态更新以了解 count 是什么。