Change language
Python.Engineering Wiki Setstate En Javascript

Setstate En Javascript

__del__ | __main__ Python module | array Python module | code Python module | COM PHP module | copy Python module | dis Python module | DOM PHP module | Ev PHP module | FFI PHP module | gc Python module | html Python module | http Python module | imp Python module | io Python module | JavaScript | keyword Python module | operator Python module | os Python module | PS PHP module | pty Python module | Python functions | re Python module | resource Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

Le suivi de l`état d`une application est la façon dont une application à page unique (SAP) enregistre les modifications et les signale à l`utilisateur. Contrairement à un template framework, view, controller (MVC), SAP ne redirige pas l`utilisateur et a donc besoin d`un moyen de gérer les changements à venir côté client. Pour passer en revue les frameworks MVC, reportez-vous à ce guide .

Dans React, les composants eux-mêmes peuvent gérer leur propre état et réapparaître en conséquence. Cela se fait par des méthodes de cycle de vie, qui sont discutées en profondeur ici. Pour les besoins de cet article, nous verrons comment modifier les états à l`aide de setState.

Ce guide suppose une certaine connaissance de base de React. Pour revoir ou apprendre les bases de React, cet article répertorie certaines des meilleures ressources d`apprentissage de React.

Qu`est-ce que React setState ?

La méthode React setState revient à changer l`état d`un composant avec stabilité. Il existe quelques règles spécifiques pour changer de statut dans React.

  1. setState ne peut pas être appelé dans un composant de classe. Les composants de la classe appellent la méthode constructeur () et définissent un état initial. Ensuite, nous pouvons changer l`état plus bas en appelant setState.
    Il existe deux types de composants différents dans React. C`est le composant fonctionnel et le composant de classe. Pour nos besoins, nous ne parlons que des composants de la classe. Pour un examen plus approfondi, consultez cet     article sur les différences entre les composants fonctionnels et de classe.
  2. En appelant uniquement setState dans un composant de classe, nous pouvons directement faire référence au composant lui-même en utilisant le mot-clé this. L`appel de this.setState () est la meilleure pratique et garantit que votre code ne se cassera pas.
  3. Ne modifiez pas le statut directement. Le changement d`état direct ne sera pas enregistré sur React to Spawning. L`intérêt du changement d`état est de déclencher une nouvelle interprétation de ce composant pour refléter les modifications apportées à l`utilisateur.

Regardons maintenant la syntaxe dans le contexte de ces directives.

Syntaxe setState React

D`après la première consigne, vous voyez que nous ne pouvons utiliser setState qu`à l`intérieur d`un composant de classe. Par exemple, supposons que vous ayez une application professionnelle et que vous souhaitiez mettre en œuvre un panier. Nous pourrions configurer un composant de classe appelé panier. Ce composant se chargera de gérer son propre statut lorsqu`un utilisateur ajoutera un article à son panier.

En décomposant le code ci-dessus, nous déclarons le composant de classe Cart Comme tous les composants de classe, nous étendons réagissons .Component. C`est le standard Syntaxe React.

Puisque nous voulons accorder un état à ce volet, nous devons appeler la méthode du constructeur. Par conséquent, le constructeur de base est appelé avec super (props). Vous pouvez voir le constructeur de base non appelé avec des accessoires. La documentation officielle de React demande que la méthode du constructeur de base soit toujours appelée avec les props

Maintenant que nous avons parcouru la syntaxe React nécessaire pour construire un composant de classe pour maintenir l`état, nous sommes prêts à affecter notre état initial. C`est la seule fois où nous pouvons nous référer directement à l`état. Attribuez l`état par appeler this.state =.{ShoppingCart : []} nous permet de définir l`état initial de notre panier sur un tableau vide <

h2> Exemple de réaction setState

dans la section précédente, nous avons examiné la syntaxe impliquée dans la déclaration d`un état initial. Une fois l`état défini dans la méthode du constructeur, nous pouvons restituer comme d`habitude :

Votre panier

); }} ReactDOM.render (, document.getElementById (`root`));

Ici, nous avons un composant de classe avec son panier d`état initial et il affiche le panier dans la déclaration de retour de la méthode de rendu. Voyons comment nous pouvons utiliser setState pour mettre à jour notre panier.

Nous définissons une fonction qui ajoutera un nouvel article à notre panier tout en conservant les articles ajoutés précédemment. Nous utiliser l`opérateur JavaScript diffusion (.. .) pour faire une copie de l`état initial et mettre à jour avec le nouvel état. de cette façon, le panier contiendra tous les éléments ajoutés.

la fonction addItem peut être utilisée dans l`attribut onClick React d`un bouton si nous voulons que l`utilisateur puisse ajouter cet article quand un bouton clique . Pour nos besoins, voir Comment utiliser setState dans une partie d`une fonction est suffisant scientifique.

Cet article est conçu comme une introduction à la compréhension de l`utilisation de setState et n`est en aucun cas exhaustif.

Conclusion

Dans cet article, nous avons appris ce qu`est setState, des directives sur la façon de l`utiliser, la syntaxe et un court exemple. Ceci est censé être une base d`article pour vous encourager à creuser plus profondément et la pratique de mettre à jour un état des composants que vous

la documentation officielle de React contient des exemples supplémentaires qui offriront plus d`opportunités de pratique. Rappelez-vous que dans l`application d`une seule page, le suivi de l`état d`un composant est essentiel pour apporter des modifications à l`utilisateur.