Comment amener la réactivité à réagir avec les états

Photo par @igorovsyannykov de Unsplash
Cela fait partie de ma série «React pour les débutants» sur l'introduction de React, ses fonctionnalités essentielles et les meilleures pratiques à suivre. Plus d'articles sont à venir!

Si vous savez comment afficher un composant React, c’est génial. Donnons maintenant à nos composants leurs propres données.

Clause de non-responsabilité: cet article porte sur l’état intégré de React. Notez que l'état du composant et Redux ne sont pas incompatibles, leur objectif étant différent.

À mon avis, l'état du composant est spécifique à la portée du composant (pour l'achèvement du formulaire). En outre, l'état Redux permet de partager le même état entre de nombreux composants.

Ai-je besoin d'un état?

Pour apprendre les états, créons un composant Question. Il affichera une question oui / non et demandera une réponse.

Notre Questioncomponent ne contient que trois fonctions:

  • constructeur d'initialisation (props et state),
  • answerQuestion est un rappel déclenché lorsque l'utilisateur répond
  • rendu que vous connaissez probablement déjà - il sort le gabarit du composant.

Ce composant a deux états distincts. La question n'est pas répondue, ou la question a une réponse.

Les accessoires ne sont utilisés que pour l’étiquette de la question et le but de l’État est bien plus intéressant.

L'état est la mémoire de composant qui se souvient si la question a une réponse. Si c'est le cas, il connaît également la réponse.

Transformer l'état en accessoires

Utiliser un état dans un composant est facile. Vous devez initialiser l'état et appeler setStatefunction chaque fois que vous souhaitez mettre à jour son contenu.

Imaginez être un composant. Si votre état change, votre réaction sera de vérifier si vous devez mettre à jour votre affichage.

C'est comme ça que ça marche. Les appels de réaction devraientComponentUpdate avant d'appeler le rendu (voir la documentation). Cette seconde fonction va générer le prochain état Virtual DOM (mon dernier article en parle).

Les composants obtiennent des accessoires d'autres composants. Si ces accessoires changent, le composant sera mis à jour.

En fait, vous savez déjà comment cela fonctionne - mais prenons l’exemple d’une enquête contenant une question.

Survey contient les étiquettes de questions dans son état et le donne à Question en tant que propriété.

Lorsque l'enquête met à jour son état (appelle setState), la fonction de rendu se déclenche. Si tel est le cas, il envoie une demande de rendu de question (détails dans le document React).

Adopter le modèle de conteneur

Le découplage de la vue et du reste du code a toujours été une préoccupation majeure des développeurs. C’est pourquoi la plupart des modèles de conception utilisés dans les cadres s’étendent du modèle MVC.

Si vous utilisez React avec Redux, vous connaissez déjà le modèle de conteneur. En fait, c’est une fonctionnalité intégrée de Redux via la fonction de connexion.

Il est temps de scinder le composant Question en deux composants.

Question sera responsable de rendre les accessoires. Ce type de composant est appelé composant fonctionnel, de présentation ou muet.

QuestionContainer traitera de la gestion de l'état.

Pour une comparaison avec le modèle de conception MVC, Question est une vue et QuestionContainer est un contrôleur.

Les autres composants qui ont besoin de Questionwill utilisent maintenant QuestionContainer au lieu de Question. Cette considération est tout à fait acceptée dans la communauté.

Attention aux anti-motifs de setState

L'utilisation de setState est assez simple.

Passer l'état suivant comme premier et unique paramètre. Il mettra à jour les propriétés de l'état actuel avec les nouvelles valeurs transmises.

Pour résumer, n’utilisez pas cet état et cet objet.

Ces variables peuvent ne pas avoir les valeurs que vous attendez. React optimise les changements d'état. Il réduit de multiples modifications en une seule pour les problèmes de performances (avant les optimisations Virtual DOM).

Vous devriez préférer l'autre forme de setState. Fournissez une fonction en tant que paramètre unique et utilisez les paramètres prop et state (voir la documentation).

La composante complète de l'enquête

Dans cet article, nous avons présenté les principales utilisations de l’état dans React. Vous pouvez trouver le code complet du composant Survey dans le Codepen suivant.

C'était tout à propos des états. Vous avez rencontré des composants, des accessoires et des états, et vous disposez maintenant du kit de débutant pour jouer avec React.

J'espère que vous avez apprécié la lecture de cet article et appris beaucoup de choses!

Si vous avez trouvé cet article utile, veuillez cliquer plusieurs fois sur le bouton pour que les autres trouvent l’article et manifestent leur soutien!

N’oubliez pas de me suivre pour être averti de mes prochains articles

Cela fait partie de ma série «React pour les débutants» sur l'introduction de React, ses fonctionnalités essentielles et les meilleures pratiques à suivre.

Découvrez mes autres articles

➥ JavaScript

  • Comment améliorer vos compétences en JavaScript en écrivant votre propre cadre de développement Web
  • Erreurs courantes à éviter lors du travail avec Vue.js

➥ Trucs et astuces

  • Arrêtez le débogage JavaScript pénible et adoptez Intellij avec la carte source
  • Comment réduire d'énormes paquets JavaScript sans effort