为何使用React中的useState和函数式更新表单是必要的？

Question

我正在阅读有关React Hook函数更新的文档，并看到了这句话：

“+”和“-”按钮使用函数形式，因为更新的值是基于先前的值

但我看不出函数更新的目的是什么，以及它们与直接在计算新状态时使用旧状态之间的区别。

为什么React useState Hook的更新函数需要函数更新形式？ 有哪些例子可以清楚地看到差异（因此使用直接更新会导致错误）？

例如，如果我将文档中的示例更改为：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

直接更新count：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </>
  );
}

我看不出任何行为上的差异，并且无法想象出count不会被更新的情况（或者不是最新的情况）。因为每当count发生变化时，都会调用新的闭包来捕获最新的count。

Answer 1

最近我遇到了这个需求。例如，假设你有一个组件，它会填充一个数组，并且能够根据用户的某些操作（比如在我的情况下，当用户不断向下滚动屏幕时，我会每次加载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

...
<button onClick={()=>run()}>获取更多</button>
...

显然，你不能简单地将feedItems添加到useEffect钩子的依赖列表中，因为你在其中调用了setFeedItems，所以会陷入循环。

函数式更新来拯救：

useEffect(() => {
    if (data) {
      setFeedItems(prevItems => [...prevItems, ...data.items]);
    }
  }, [data]);     //  <--- 现在一切都好了

Answer 2

在React中，状态更新是异步的。因此，在下一次更新时，count中可能会有旧值。例如，比较以下两个代码示例的结果：

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(prevCount => prevCount + 1); 
        setCount(prevCount => prevCount + 1)}
      }>+</button>
    </>
  );
}

和

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>重置</button>
      <button onClick={() => {
        setCount(count + 1); 
        setCount(count + 1)}
      }>+</button>
    </>
  );
}