我正在阅读有关React Hook函数更新的文档，并看到了这句话：
“+”和“-”按钮使用函数形式，因为更新的值是基于先前的值
但我看不出函数更新的目的是什么，以及它们与直接在计算新状态时使用旧状态之间的区别。
为什么React useState Hook的更新函数需要函数更新形式？ 有哪些例子可以清楚地看到差异（因此使用直接更新会导致错误）？
例如，如果我将文档中的示例更改为：
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} ); } 直接更新count：
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} ); } 我看不出任何行为上的差异，并且无法想象出count不会被更新的情况（或者不是最新的情况）。因为每当count发生变化时，都会调用新的闭包来捕获最新的count。
最近我遇到了这个需求。例如，假设你有一个组件，它会填充一个数组，并且能够根据用户的某些操作（比如在我的情况下，当用户不断向下滚动屏幕时，我会每次加载10个项目的动态源。代码看起来有点像这样：
function Stream() { const [feedItems, setFeedItems] = useState([]); const { fetching, error, data, run } = useQuery(SOME_QUERY, vars); useEffect(() => { if (data) { setFeedItems([...feedItems, ...data.items]); } }, [data]); // <---- 这违反了hooks的规则，缺少了feedItems ... ...显然，你不能简单地将feedItems添加到useEffect钩子的依赖列表中，因为你在其中调用了setFeedItems，所以会陷入循环。
函数式更新来拯救：
useEffect(() => { if (data) { setFeedItems(prevItems => [...prevItems, ...data.items]); } }, [data]); // <--- 现在一切都好了在React中，状态更新是异步的。因此，在下一次更新时，
count中可能会有旧值。例如，比较以下两个代码示例的结果：function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} ); }和
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} ); }