涉及先前状态的计算何时需要功能更新？

Question

根据 documentation 的 useState React Hook：

If the new state is computed using the previous state, you can pass a function to setState. The function will receive the previous value, and return an updated value.

如此给出

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

你可以写

setCount(prevCount => prevCount + 1);

我理解 setState 使用更新函数形式的原因，因为可以批处理多个调用。然而

During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates.

所以我不清楚为什么上面的例子不能写成

setCount(count + 1);

（Using the State Hook 中的显示方式）。

是否存在必须使用带有 useState 挂钩的功能更新才能获得正确结果的情况？

（编辑：可能与 https://github.com/facebook/react/issues/14259 相关）

Answer 1

仍然需要功能更新语法的主要场景是在异步代码中。想象一下，在 useEffect 中你做了某种 API 调用，当它完成时你更新了一些状态，这些状态也可以通过其他方式改变。 useEffect 将在效果开始时关闭状态值，这意味着在 API 调用完成时，状态可能已过时。

下面的示例通过单击按钮触发两个在不同时间完成的不同异步进程来模拟此场景。一键立即更新计数；一个按钮在不同时间触发两个异步增量，而不使用功能更新语法（朴素按钮）；最后一个按钮使用功能更新语法（Robust button）在不同时间触发两个异步增量。

你可以在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);

另一种可能需要功能更新的情况是，如果多个效果正在更新状态（即使是同步的）。一旦一个效果更新了状态，另一个效果就会查看过时的状态。与异步场景相比，这种场景对我来说似乎不太可能（并且在大多数情况下似乎是一个糟糕的设计选择）。

涉及先前状态的计算何时需要功能更新？

When are functional updates required for computations involving previous state?

javascript

reactjs

react-hooks