根据该文件的useState阵营挂钩：
如果使用先前的状态计算新状态，则可以将函数传递给
setState。该函数将接收先前的值，并返回一个更新的值。
所以给出
const [count, setCount] = useState(initialCount);
你可以写
setCount(prevCount => prevCount + 1);
我理解使用 updater 函数形式的原因setState，因为可能会批量调用多个调用。然而
在随后的重新渲染期间，返回的第一个值
useState将始终是应用更新后的最新状态。
所以我不清楚为什么上面的例子不能写成
setCount(count + 1);
（这就是它在Using the State Hook 中的呈现方式）。
是否存在必须使用带有useState钩子的功能更新才能获得正确结果的情况？
仍然需要功能更新语法的主要场景是在异步代码中。想象一下，useEffect您进行了某种 API 调用，当它完成时，您更新一些状态，该状态也可以通过其他方式进行更改。useEffect将在效果开始时关闭状态值，这意味着到 API 调用完成时，状态可能已过时。
下面的示例通过单击按钮触发两个在不同时间完成的不同异步进程来模拟这种情况。一键立即更新计数；一个按钮在不同时间触发两个异步增量，而无需使用功能更新语法（Naive 按钮）；最后一个按钮使用功能更新语法（健壮按钮）在不同时间触发两个异步增量。
您可以在 CodeSandbox 中使用它来查看效果。
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
function App() {
const [count, setCount] = useState(1);
const [triggerAsyncIndex, setTriggerAsyncIndex] = useState(1);
const [triggerRobustAsyncIndex, setTriggerRobustAsyncIndex] = useState(1);
useEffect(
() => {
if (triggerAsyncIndex > 1) {
setTimeout(() => setCount(count + 1), 500);
}
},
[triggerAsyncIndex]
);
useEffect(
() => {
if (triggerAsyncIndex > 1) {
setTimeout(() => setCount(count + 1), 1000);
}
},
[triggerAsyncIndex]
);
useEffect(
() => {
if (triggerRobustAsyncIndex > 1) {
setTimeout(() => setCount(prev => prev + 1), 500);
}
},
[triggerRobustAsyncIndex]
);
useEffect(
() => {
if (triggerRobustAsyncIndex > 1) {
setTimeout(() => setCount(prev => prev + 1), 1000);
}
},
[triggerRobustAsyncIndex]
);
return (
<div className="App">
<h1>Count: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increment Count</button>
<br />
<button onClick={() => setTriggerAsyncIndex(triggerAsyncIndex + 1)}>
Increment Count Twice Async Naive
</button>
<br />
<button
onClick={() => setTriggerRobustAsyncIndex(triggerRobustAsyncIndex + 1)}
>
Increment Count Twice Async Robust
</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
另一种可能需要功能更新的情况是，如果多个效果正在更新状态（即使是同步的）。一旦一个效果更新了状态，另一个效果就会查看过时的状态。与异步场景相比，这种场景对我来说似乎不太可能（并且在大多数情况下似乎是一个糟糕的设计选择）。