Pourquoi les formulaires useState et de mise à jour fonctionnelle dans React sont-ils nécessaires ?

Question

Je lisais la documentation sur les mises à jour de la fonction React Hook et j'ai vu cette phrase :

Les boutons "+" et "-" utilisent une forme fonctionnelle car la valeur mise à jour est basée sur la valeur précédente

Mais je ne vois pas quel est le but des mises à jour de fonctions, ni la différence entre elles et l'utilisation directe de l'ancien état lors du calcul du nouvel état.

Pourquoi la fonction de mise à jour de React useState Hook nécessite-t-elle un formulaire de mise à jour de fonction ? Quels sont quelques exemples où la différence est clairement visible (et donc l'utilisation de la mise à jour directe entraînerait une erreur) ?

Par exemple, si je modifie l'exemple dans la documentation en :

fonction Compteur({initialCount}) {
  const [count, setCount] = useState(initialCount);
  retour (
    ≪>
      Nombre : {compte}
       setCount(initialCount)}>Réinitialiser
       setCount(prevCount => prevCount + 1)}>+
       setCount(prevCount => prevCount - 1)}>-
    ≪/>
  );
}
Mettre à jour directement count
fonction Compteur({initialCount}) {
  const [count, setCount] = useState(initialCount);
  retour (
    ≪>
      Nombre : {compte}
       setCount(initialCount)}>Réinitialiser
       setCount(count + 1)}>+
       setCount(count - 1)}>-
    ≪/>
  );
}
Je ne vois aucune différence de comportement et je ne peux pas imaginer une situation dans laquelle le décompte ne serait pas mis à jour (ou ne serait pas à jour). Parce que chaque fois que le décompte change, une nouvelle fermeture sera appelée pour capturer le dernier décompte. 

Answer 1

J'ai rencontré ce besoin récemment. Par exemple, disons que vous disposez d'un composant qui remplit un tableau et est capable de charger une source dynamique de 10 éléments à chaque fois en fonction d'une action de l'utilisateur (comme dans mon cas, lorsque l'utilisateur continue de faire défiler l'écran vers le bas. Le code ressemble un peu comme ça :

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>
...

Évidemment, vous ne pouvez pas simplement ajouter feedItems à la liste de dépendances du hook useEffect car vous y appelez setFeedItems, vous serez donc coincé dans une boucle.

Mises à jour fonctionnelles à la rescousse :

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

Answer 2

Dans React, les mises à jour de statut sont asynchrones. Par conséquent, lors de la prochaine mise à jour, il se peut qu'il y ait d'anciennes valeurs dans count. Par exemple, comparez les résultats des deux exemples de code suivants :

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

et

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