反应使用状态。为什么文档建议在设置状态时传递具有先前状态的函数？

Question

在 React 文档 (https://reactjs.org/docs/hooks-reference.html#usestate) 中它说“如果新状态是使用以前的状态计算的，您可以将函数传递给 setState”，如下所示：

const [count, setCount] = useState(initialCount);
setCount(prevCount => prevCount + 1)

但是为什么 React 会建议将此作为解决方案，因为它可以像这样使用 count 变量更简洁地完成：

const [count, setCount] = useState(initialCount);
setCount(count + 1)

后一种方法即使在处理数组等可变对象时也适用，如本例所示：

https://codesandbox.io/s/6b-array-subcomp-event-usestate-props-r032xv

Answer 1

建议使用函数是因为您可以确保在其参数中获得可靠的先前状态。另一方面，如果您直接使用状态的值，则可能会发生您正在读取其陈旧值的情况，因为反应的 setState 操作是异步的并且可能仍未更新状态。

这是一个例子：

function App() {
  const [a, setA] = useState(0);
  const [b, setB] = useState(0);
  useEffect(() => {
    setA(a + 2);
    setA(a + 2);
  }, []);
  useEffect(() => {
    setB((prev) => prev + 2);
    setB((prev) => prev + 2);
  }, []);
  return (
    <div>
      <h1>{a}</h1>
      <h1>{b}</h1> 
    </div>
  );
}

a 将包含 2 因为 React 会同时执行两个 setA （批量更新）因此读取之前的状态 a 一次，此时为 0 .

然而，

b 将具有正确的值 4，因为它明确使用更新函数参数提供的先前状态。

Answer 2

如果您有一个使用 SetCount 两次的函数，而不使用前一个状态，它将只设置一次。

const [count, setCount] = useState(0);
const fun1 = () =>{
   setCount(count + 1)
   setCount(count + 1)
}
// it will change count to 1 rather than 2

这就是为什么建议使用上一个状态

反应使用状态。为什么文档建议在设置状态时传递具有先前状态的函数？

React useState. Why do the docs advise passing a function with the previous state when setting the state?

reactjs

react-hooks

use-state