Pourquoi les formulaires useState et de mise à jour fonctionnelle dans React sont-ils nécessaires ?
P粉041856955
2023-08-24 13:38:45
<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>
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 :
É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 :
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 :et