Maison > interface Web > js tutoriel > Pourquoi setState de React est-il asynchrone et comment puis-je m'assurer d'accéder à l'état mis à jour ?

Pourquoi setState de React est-il asynchrone et comment puis-je m'assurer d'accéder à l'état mis à jour ?

Patricia Arquette
Libérer: 2024-12-15 19:18:11
original
256 Les gens l'ont consulté

Why is React's setState Asynchronous, and How Can I Ensure I Access the Updated State?

setState dans React : mises à jour d'état asynchrones

La méthode setState de React est asynchrone, ce qui signifie qu'elle ne met pas à jour l'état immédiatement. Ce comportement prête souvent à confusion lorsque les développeurs s'attendent à des changements d'état instantanés après avoir appelé setState.

Dans l'exemple fourni, l'état du composant n'est pas mis à jour lorsque vous cliquez sur le bouton car console.log(this.state.boardAddModalShow) s'exécute avant que la mutation d'état ne soit terminée.

Pour enregistrer correctement l'état mis à jour, la fonction de rappel fournie à setState doit être utilisé :

openAddBoardModal() {
  this.setState({ boardAddModalShow: true }, () => {
    console.log(this.state.boardAddModalShow);
  });
}
Copier après la connexion

Nature asynchrone de setState

React diffère les mutations d'état pour améliorer les performances en les regroupant. Cette optimisation évite les nouveaux rendus inutiles et garantit une expérience utilisateur plus fluide.

Comme indiqué dans la documentation React :

"setState() ne mute pas immédiatement this.state mais crée une transition d'état en attente L'accès à this.state après avoir appelé cette méthode peut potentiellement renvoyer la valeur existante. Il n'y a aucune garantie de fonctionnement synchrone des appels à setState et les appels peuvent être groupés pour des raisons de performances. gains."

Pourquoi les mises à jour d'état asynchrones ?

Les mises à jour d'état asynchrones sont nécessaires car la modification de l'état peut être une opération coûteuse en termes de calcul qui peut impliquer de restituer l'intégralité du composant. arbre. En rendant setState asynchrone, React peut regrouper plusieurs mises à jour d'état et les effectuer efficacement en un seul cycle de rendu. Cette optimisation empêche l'interface utilisateur de ne plus répondre en raison de mutations d'état excessives.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal