钩子中的先前状态

Question

类型 1：

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(count + 1)}>+</button>

类型 2：

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>

尽管上述两个代码给出了相同的结果，但它们之间到底有什么区别以及为什么第二种方法比第一种方法更受欢迎

Answer 1

更新状态是异步的，因此当您再次更新它时，可能会有先前的值处于"count"状态

Answer 2

不同之处在于类型 2 具有最新值，而类型 1 具有自上次刷新以来的最新值。您会注意到，在发生任何刷新之前，是否多次调用setCount。

const [count, setCount] = useState(0);
const someFunction => () => {
console.log(count); //0
setCount(count + 1); // count will be set to 1 on next refresh
console.log(count); //still 0
setCount(count + 1); // count will still be 1  on next refresh since count hasn't been refreshed
console.log(count); //still 0
setCount(c => c + 1); // count will be 2 on next refresh since c has the latest value
console.log(count); //still 0
};