Pourquoi les formulaires useState et de mise à jour fonctionnelle dans React sont-ils nécessaires ?
P粉041856955
P粉041856955 2023-08-24 13:38:45
0
2
500
<p>Je lisais la documentation sur les mises à jour de la fonction React Hook et j'ai vu cette phrase : </p> <blockquote> <p>Les boutons "+" et "-" utilisent une forme fonctionnelle car la valeur mise à jour est basée sur la valeur précédente</p> </blockquote> <p>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. </p> <p><strong>Pourquoi la fonction de mise à jour de React useState Hook nécessite-t-elle un formulaire de mise à jour de fonction ? </strong> <strong>Quels sont quelques exemples où la différence est clairement visible (et donc l'utilisation de la mise à jour directe entraînerait une erreur) ? </strong></p> <p>Par exemple, si je modifie l'exemple dans la documentation en : </p> <pre class="brush:php;toolbar:false;">fonction Compteur({initialCount}) { const [count, setCount] = useState(initialCount); retour ( ≪> Nombre : {compte} <bouton onClick={() => setCount(initialCount)}>Réinitialiser</bouton> <bouton onClick={() => setCount(prevCount => prevCount + 1)}>+</bouton> <bouton onClick={() => setCount(prevCount => prevCount - 1)}>-</bouton> ≪/> ); }</pré> <p>Mettre à jour directement <code>count</code> <pre class="brush:php;toolbar:false;">fonction Compteur({initialCount}) { const [count, setCount] = useState(initialCount); retour ( ≪> Nombre : {compte} <bouton onClick={() => setCount(initialCount)}>Réinitialiser</bouton> <bouton onClick={() => setCount(count + 1)}>+</bouton> <bouton onClick={() => setCount(count - 1)}>-</bouton> ≪/> ); }</pré> <p>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. </p>
P粉041856955
P粉041856955

répondre à tous(2)
P粉986937457

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]);     //  <--- 现在一切都好了
P粉238355860

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>
    </>
  );
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal