Comment utiliser les crochets de réaction simples pour le contexte

Avec React Conf 2018 derrière nous, nous avons appris que la version 16.7 de React introduisait une nouvelle fonctionnalité importante: React Hooks. Devenez "accro" à React en jetant un coup d'œil à useContext React Hook!

Nous avons commencé cette série en parlant des deux plus couramment utilisés et faciles à apprendre React Hooks . : Comment utiliser les crochets à réaction simples pour State and Effects . Nous avons examiné la proposition React JS Docs pour Hooks et avons fourni quelques démonstrations StackBlitz que vous suivez et modifiez chacune des démonstrations dont nous parlons. Comprendre le fonctionnement de l'état et des effets n'est pas toute l'histoire, en fait, il faudra plus de deux billets de blog pour bien couvrir Hooks. Nous avons encore un crochet de base à apprendre avant de couvrir complètement les bases.

Après avoir lu cet article, vous devriez être à l'aise pour pouvoir partager des données entre les composants fonctionnels de votre application à l'aide de divers crochets de base et setState. . Il s'agit d'une passerelle permettant de gérer davantage d'états selon un modèle similaire à ce que vous connaissez dans Flux et Redux, mais sans importer une autre bibliothèque. Nous pouvons le faire avec le noyau React. Mais nous devons d’abord comprendre le contexte dans React.

Utilisation des crochets de réaction pour le contexte

Pour comprendre le troisième comportement de base du crochet de réaction utiliserContext, nous devons d’abord bien comprendre l’API de contexte, un caractéristique stable depuis React 16.3 . Comme pour apprendre la plupart des choses, nous devons parfois comprendre parfaitement un autre concept avant d'aller de l'avant. Si vous connaissez l’API de contexte, vous pouvez passer à la section useContext . Cependant, si l'API de contexte est nouvelle pour vous, nous l'examinerons brièvement et montrerons quelques démonstrations avant de passer à l'utilisation de Context with Hooks. Vous ne pouvez pas utiliserContext sans avoir au préalable fourni un contexte dans votre application. J'aimerais aussi vous montrer une démo de StackBlitz qui servira de point de départ pour le code avec lequel nous allons travailler. Il reprend là où nous en sommes restés avec l'exploration de l'état et des effets.

Un bon exemple d'utilisation de Context est un composant de profil. Pensez à certaines informations susceptibles d’être affichées sur un profil. Lorsque je suis connecté à xyz.com, j'ai un nuage de données qui doit être disponible pour tout ou partie des composants enfants d'un composant de profil. Nous pouvons supposer que ce composant de profil nécessite deux composants: et . L'un de ces deux composants affichera mon nom d'utilisateur et mon image, l'autre affichera mon équipe. Dans mon entreprise, des personnes font partie des équipes React, Angular et Vue. Nous pouvons donc utiliser les frameworks comme noms d'équipe. De retour au code, nous pouvons passer les données nécessaires (sous forme d'objet) dans un composant via son attribut value . Nous pourrions laisser n'importe quel composant et ses composants enfants partager ces données.

Voyons comment aborder ce composant en passant simplement des accessoires à travers des composants, ce qui est sans aucun doute une option dans l'ère des API antérieures à Context. Nous propagons nos données vers le bas à travers chaque composant de l'arborescence des composants "forage de prop." Les entrées de chaque composant permettent de passer d'un état extérieur à un autre et à ses composants enfants.

Voyons une démonstration du code de cet exemple de l'époque pré-contextuelle.

If une application a 10 composants, chacun ayant son propre arbre de composants qui à son tour a son propre arbre de composants, préférez-vous transmettre manuellement les accessoires aux composants qui peuvent ou non avoir besoin des données? Ou préférez-vous simplement consommer ces données depuis n’importe quel point de l’arborescence des composants? Le contexte permet ce partage de valeurs entre les composants sans avoir à passer explicitement un accessoire à tous les niveaux de l'arbre. Essayons de voir comment l'API de contexte en elle-même peut être appliquée à des composants basés sur des classes:

Voyons également un exemple de cela dans StackBlitz!

Introduction à l'API de contexte

Pour bien comprendre les bases de React Hooks, nous devons simplement comprendre ceci: comment nous avons pu accéder à l’état en utilisant useState et comment nous avons pu accéder à un autre cycle de vie avec useEffect . Nous devons maintenant pouvoir consommer un fournisseur à l'aide d'un hook appelé useContext .

Dans la démonstration ci-dessus de l'API de contexte, nous avons clairement trouvé le moyen de partager des données via de nombreux composants. Mais cela impliquait un motif qui me semblait toujours un peu maladroit et qui ne m'aidait vraiment pas à minimiser la quantité de code que nous devions écrire. Passant de notre exemple de forage d'accessoires simple à un exemple beaucoup plus facile à gérer avec l'API de contexte, nous avons obtenu un code qui, s'il constitue une meilleure solution à notre problème, encombre réellement nos composants. Voyons de quoi je parle:

Chaque lieu où je veux utiliser le contexte, je dois envelopper ces balises ProfileContext.Consumer autour des éléments DOM que je veux consommer ce fournisseur. Il serait bien de simplement créer un const dans ce composant fonctionnel avec un crochet pour utiliser le contexte de profil. Ces contenants de consommation m'ont toujours semblé bizarres. Les crochets peuvent améliorer cela.

C'est déjà beaucoup plus agréable à regarder. Cela ne semble pas maladroit – en fait, cela me donne l'impression de rendre le code plus lisible. Ceci est un exemple de la façon dont Hooks va changer la façon dont nous écrivons les composants normaux et quotidiens.

Ceci appelle un exemple StackBlitz mis à jour. Voyons maintenant notre composant de profil utilisant des crochets. Pas grand chose à expliquer – vous pouvez voir que lorsque nous nous sommes connectés à l'état à l'aide de useState, nous avions deux valeurs dont nous avions besoin pour comprendre que l'une était l'état réel, l'autre une méthode de mise à jour de l'état. Avec useEffect, vous devez comprendre certaines astuces telles que le nettoyage et le fait qu'il remplace plusieurs méthodes du cycle de vie. Avec useContext, nous le pointons simplement vers un contexte existant et cette propriété contient maintenant une référence à ce contexte. C'est aussi simple que cela.

Look Ma, No Provider

Dans la démo ci-dessus, nous avons découvert useContext et, comme nous ne lisons que les données à l'intérieur du contexte, nous avons transmis l'objet / les données directement dans la méthode createContext () de l'API de contexte. Cela est tout à fait valable et en fait, nous n’avons pas à envelopper le composant autour du composant de profil. Cependant, ce n'est pas ce que je veux laisser. Je veux en fait créer ce fournisseur, car pour pouvoir modifier l'équipe et affecter une autre équipe, je dois créer un fournisseur et, Dans cet objet d'état, nous pouvons affecter une fonction qui s'exécutera et à setState dans notre propriété team à l'intérieur de l'objet d'état. Cette modification déclenche une mise à jour de l'état et se répercute sur le composant consommateur.

Dans certains cas, nous devons avoir la possibilité de mettre à jour l'état. Par exemple, je souhaite pouvoir modifier l'équipe à laquelle notre utilisateur est affilié.

Pour ce scénario, nous allons créer à nouveau un et ne pas simplement passer à un état de contexte par défaut lors de l'utilisation de createContext [19659031] Mise à jour de l'état d'un fournisseur

J'aimerais revenir à notre exemple d'API de contexte et le mettre à jour pour pouvoir utiliser setState pour mettre à jour l'une de nos propriétés. Nous devrions pouvoir mettre à jour la valeur Team en appelant une fonction que nous placerons dans notre état en tant que paire de valeurs de clé.

Assurez-vous que l'utilisateur peut initier un changement d'équipe en appuyant simplement sur un bouton portant le nom de l'équipe à laquelle vous souhaitez passer. Nous voulons que le changement se produise à partir du composant User, mais nous souhaitons également que les boutons apparaissent en bas de la vue Profil.

Avec l'ajout des boutons, nous aurons besoin de Chacun doit gérer un clic et transmettre le type de structure d’équipe approprié à la fonction, ce qui prend un argument, c.-à-d. nom de l'équipe: Vue, Angular or React.

Nous aurons besoin d'une fonction capable de gérer le changement d'état, nous allons créer une nouvelle propriété sur notre état nommée toggleTeam sa valeur sera la fonction qui appelle setState . Nous appellerons cette méthode à travers le contexte.

Nous pouvons maintenant modifier la valeur de l'équipe ainsi que lire le contexte. Ce modèle effectue à la fois la configuration et l'abonnement pour nous.

J'ai fourni une autre démo de StackBlitz qui améliore l'exemple de l'API de contexte d'origine. Rappelez-vous que le code ci-dessous n'utilise pas Hooks, nous verrons ensuite comment le faire.

Ensuite, nous examinerons un autre exemple. Celui-ci a une configuration similaire pour les boutons et leur gestionnaire pour changer d’équipe. En fait, il n'y a pas de différence entre la syntaxe du bouton et l'objet state dans cette version de Hooks. L’utilisation d’hameçons présente un grand avantage: nous pouvons omettre l’utilisation des balises qui entourent tout ce que nous voulons pouvoir consommer. Il a ajouté du HTML non souhaité dans notre composant. Nous créons simplement un const dans chaque composant fonctionnel:

const context = useContext (ProfileContext);

Nous appelons simplement le contexte et ses méthodes, comme nous le faisions auparavant.

Je voudrais vous montrer un exemple supplémentaire qui prend notre composant de profil actuel et refacture les boutons Modifier l’équipe en leur propre composant et convertit le fournisseur d’API de contexte pour qu’il soit fonctionnel. Il est this.state d’implémenter useState à la place. Comme je l'ai noté dans le dernier exemple, nous nous sommes également débarrassés des balises et maintenant, partout où nous allons avec utilisezContext . Tous vos codes sont désormais également des composants fonctionnels.

Wrap Up

J'espère que ces exemples interactifs vous permettront de comprendre les bases de l'utilisation des crochets React pour le contexte. Si vous êtes nouveau dans React, le blog de Telerik contient plus d'informations, notamment autour de All Things React qui contient une pléthore d'informations sur React et son écosystème. Veuillez explorer nos articles et produits et laissez-moi savoir si vous avez des questions ou des idées d'articles sur des sujets liés à React.

Merci d'avoir pris le temps de vous informer sur Reag Hooks — voici des informations supplémentaires sur le sujet que vous pouvez trouver. en ligne!

Documentation et articles anciens sur les hameçons:

Réaction des docs sur les hameçons
Donner un sens aux hameçons de réaction
Comprendre les hameçons lors de la plongée en profondeur
Un Intor simple en crochets [19659055] Réagissez 16.7 Tutoriel sur les hameçons
Hooked (Formiddable)
Flux sans fuss: des conteneurs aux hameçons

Ressources vidéo sur les hameçons

Réagir Con 2018 Premier jour
Partager le complexe Logique entre composants React avec crochets personnalisés
Accès et modification d'un nœud DOM avec React useRef et useEffect Hooks
Partage de la logique entre plusieurs composants de réaction avec des crochets personnalisés
Crochet à réaction Testez les composants réactifs utilisant des crochets à réaction
Réagissez avec une introduction complète des crochets
TODO List avec crochets