Pourquoi avez-vous besoin d'utiliser React useState sous forme de mises à jour fonctionnelles ?

Question

Je lisais la documentation de React Hook sur les mises à jour des fonctionnalités et j'ai regardé la citation suivante :

Les boutons "+" et "-" utilisent une forme fonctionnelle en raison des mises à jour Les valeurs sont basées sur les valeurs précédentes

Mais je ne vois pas quel est le but d'exiger des mises à jour de fonctionnalités et quelle est la différence entre elles et utiliser directement l'ancien état pour calculer le nouvel état.

Pourquoi la fonction de mise à jour de React useState Hook nécessite-t-elle un formulaire de mise à jour fonctionnelle ? Y a-t-il des exemples où nous pouvons clairement voir la différence (et donc utiliser la mise à jour directe provoquerait une erreur) ?

Par exemple, si je change cet exemple de la documentation

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

Mettre à jour directementcount :

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

Je ne vois aucune différence de comportement et je ne peux pas imaginer une situation où le décompte ne sera pas mis à jour (ou ne sera pas à jour). Parce que chaque fois que le nombre change, une nouvelle fermeture de onClick est appelée, capturant le dernier onClick 的新闭包，捕获最新的 count.

Answer 1

Je suis tombé sur ce besoin récemment. Par exemple, disons que vous avez un composant qui remplit un tableau avec un certain nombre d'éléments et est capable d'ajouter à ce tableau en fonction d'une action de l'utilisateur (comme dans mon cas, je charge un flux 10 éléments à la fois parce que l'utilisateur garde Faites défiler vers le bas et le code ressemble un peu à ceci :

function Stream() {
  const [feedItems, setFeedItems] = useState([]);
  const { fetching, error, data, run } = useQuery(SOME_QUERY, vars);

  useEffect(() => {
    if (data) {
      setFeedItems([...feedItems, ...data.items]);
    }
  }, [data]);     // <---- this breaks the rules of hooks, missing feedItems

...
<button onClick={()=>run()}>get more</button>
...

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

Mises à jour des fonctionnalités à la rescousse :

useEffect(() => {
    if (data) {
      setFeedItems(prevItems => [...prevItems, ...data.items]);
    }
  }, [data]);     //  <--- all good now

Answer 2

Les mises à jour d'état dans React sont asynchrones. Ainsi, lors de votre prochaine mise à jour, il se peut qu'il y ait d'anciennes valeurs dans count. Par exemple, comparez les résultats de ces deux exemples de code :

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