React.js : Choisir la structure de l'état

Si mes articles vous plaisent, vous pouvez m'offrir un café ou le partager :)

---

Dans cet article, nous examinerons les points importants lors du choix de la structure étatique dans nos projets react.js.

---

Choisir la structure de l'État

Lors de l'écriture d'un composant React, nous devons décider combien d'états doivent être dans le composant et comment nous utiliserons ces états. Par exemple, lors de l'écriture d'un composant, nous avons utilisé 3 états et notre composant fonctionne correctement, mais vous avez remarqué que vous pouvez écrire le même composant en utilisant 3 états. Par conséquent, vous devez décider de la structure de l'État.

---

Je parlerai de 5 principes pour vous aider à prendre de meilleures décisions lors du choix de la structure étatique.

1. Regroupez les variables d'état associées

Pensez à un personnage dans un jeu vidéo, ce personnage peut se déplacer selon les coordonnées x et y. Donc, si vous vouliez écrire ces valeurs x et y sous forme d'état, comment feriez-vous ?

• Mauvaise approche :

• Meilleure approche :

Techniquement, vous pouvez utiliser l’une ou l’autre de ces approches. Mais, ** Si vous mettez toujours à jour deux variables d'état ou plus en même temps, envisagez de les fusionner en une seule variable d'état **.

Et si vous ne savez pas de combien d'états vous avez besoin, vous pouvez regrouper les états à l'aide d'un objet ou d'un tableau.

---

2. Évitez les contradictions dans l'État.

Pensez à une application de messagerie. Vous savez qu’il y a deux étapes différentes lorsque vous donnez votre accord pour envoyer un message. Le premier est « le message est en cours d’envoi » et le second est « le message a été envoyé ». Alors, quelle serait la première chose qui nous viendrait à l’esprit si nous déclarions ces deux états comme deux états différents, vrai et faux ?

• Mauvaise approche (Risque de conflits) :

Puisque isSending et isSent ne devraient jamais être vrais en même temps, il est préférable de les remplacer par une variable d'état d'état qui peut prendre l'un des trois états valides : « saisir », « envoi » et « envoyé »

• Meilleure approche :

---

3. Évitez les états redondants

Lors du choix de la structure d'état d'un composant, vous avez besoin Si vous pouvez calculer certaines informations à partir des accessoires du composant ou des variables d'état existantes, vous ne devriez pas conserver ces informations dans l'état du composant.

• Mauvaise approche :

• Meilleure approche :

** Lorsque vous appelez setFirstName ou setLastName, vous déclenchez un nouveau rendu, puis le prochain nom complet sera calculé à partir des nouvelles données.**

---

Conclusion

Bien structurer l'état garantit que vous disposez de composants faciles à modifier et à déboguer. Dans cet article, j'ai parlé de 3 principes à prendre en compte lors du choix de la structure étatique. Il se peut qu'il y ait davantage de ces principes. Si vous le souhaitez, vous pouvez parler de ces principes dans les commentaires.

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!