Warum sind useState- und Funktionsaktualisierungsformulare in React notwendig?

Question

Ich habe die Dokumentation zu React Hook-Funktionsaktualisierungen gelesen und diesen Satz gesehen:

Die Schaltflächen „+“ und „-“ verwenden eine funktionale Form, da der aktualisierte Wert auf dem vorherigen Wert basiert

Aber ich kann den Zweck von Funktionsaktualisierungen und den Unterschied zwischen ihnen und der direkten Verwendung des alten Zustands bei der Berechnung des neuen Zustands nicht erkennen.

Warum erfordert die Aktualisierungsfunktion von React useState Hook ein Funktionsaktualisierungsformular? Was sind einige Beispiele, bei denen der Unterschied deutlich sichtbar ist (und daher die Verwendung einer direkten Aktualisierung zu einem Fehler führen würde)?

Wenn ich beispielsweise das Beispiel in der Dokumentation wie folgt ändere:

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

Aktualisieren Sie count

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

Ich sehe keinen Unterschied im Verhalten und kann mir keine Situation vorstellen, in der die Zählung nicht aktualisiert wird (oder nicht auf dem neuesten Stand ist). Denn jedes Mal, wenn sich die Zählung ändert, wird ein neuer Abschluss aufgerufen, um die letzte Zählung zu erfassen.

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>
    </>
  );
}