为什么普通计数器只运行最后一个 setCount 参数，而功能计数器运行所有 setCount？

Question

为什么第一个只运行最后一个 setCount 参数，而当我们使用 setCount 的箭头函数时，它会运行两个参数。

例如：如果您单击“正常”按钮，计数将为5，因为它应该为9
如果您单击“功能”按钮，计数将为2，因为它同时运行 SetCount

import react, { useState, useEffect } from "react";

export default function App() {
 const [count, setCount] = useState(0);
 console.log(count);
 return (
   <div className="App">
     <button
       onClick={() => {
         setCount(count + 1);
         setCount(count + 3);
         setCount(count + 5);
       }}
     >
       Normal
     </button>
     <br />

     <button
       onClick={() => {
         setCount((c) => c + 1);
         setCount((c) => c + 1);
       }}
     >
       Functional
     </button>
   </div>
 );
}

Answer 1

当我们使用一次参数设置值

在计数上设置当前值并运行 3 个带参数的方法

setCount(count + 1);
setCount(count + 3);
setCount(count + 5);

但在这种情况下：
setCount((c) => c + 1);
当(c)=>时c+1调用c的方法每次获取当前值

Answer 2

您的“正常”代码捕获闭包中 count 的当前状态值。第一次渲染组件时，这基本上归结为以下内容：

() => {
    setCount(0 + 1);
    setCount(0 + 3);
    setCount(0 + 5);
}

由于状态更新是批量更新的，所以最后一个获胜，因此结果状态值为 5。

“功能”代码示例使用回调 Dispatch，它为您提供更改发生时状态的先前值，不受关闭的影响。基本上：

() => {
    setCount((0) => 0 + 1);
    setCount((1) => 1 + 1);
}

两者都有其用途，取决于您想要什么。

Answer 3

在计算值的总和时，在您的情况下，从 1、3 和 5 的总和计算 9，我们需要将一个函数传递给 setCount ，参数为先前的值

setCount((c) => c + 1); // previous count is 0, new count is 1
setCount((c) => c + 3); // previous count is 1, new count is 4
setCount((c) => c + 5); // previous count is 5, new count is 9

这在官方文档中有记录:

https://reactjs.org/docs/hooks-reference.html#function-updates

如果新状态是使用先前状态计算的，则可以将函数传递给 setState。该函数将接收先前的值，并返回更新后的值。