Comprendre le contexte de React et l'exploration de propriétés (Prop)

Le contexte est une méthode de transmission de données dans une arborescence de composants sans avoir à transmettre manuellement des accessoires, une variable globale ou un objet prérequis pour React Context, à tous les niveaux. Considérez l'arborescence des composants de notre application, qui ressemble à ceci :

Nous pouvons facilement ajouter un état, l'objet JavaScript simple utilisé par React, à nos composants de niveau inférieur et gérer nos accessoires ci-dessous :

Et si nos composants sœurs exiger que des valeurs soient également présentes dans l'état ? Que ferons-nous alors ? Eh bien, cela ne peut être accompli que par "l'élévation de l'état". Alors, comment élevons-nous l'État ? C'est ainsi que nous allons déplacer l'état vers son composant parent et l'envoyer en tant qu'accessoires : Nous devons également être conscients que l'attente de données d'état est un autre composant de React Context. Jetez un œil à ce qui suit :

Alors, comment gérons-nous la situation ci-dessus ? Est-il nécessaire de passer l'état du composant depuis le niveau supérieur ? Oui, mais transmettre l'état des composants de haut niveau n'est-il pas une tâche laborieuse et chronophage ? C'est un processus long, et les composants qui n'utilisent pas les données d'état devront toujours y accéder et les transmettre en tant qu'accessoires. Nous pouvons le faire avec le forage d'accessoires. Le forage d'accessoires fait référence au processus d'envoi d'accessoires d'un composant de niveau supérieur à un composant de niveau inférieur. ]Cependant, le forage d'hélices peut devenir un problème en soi en raison de son code répétitif. Alors, quelle est la meilleure façon de résoudre ce nouveau problème ? Nous pouvons le faire avec une interface de programmation d'application (API) Context. L'architecture du flux fournisseur-consommateur sera travaillée à l'aide de l'API de contexte. Quelle est la nature de ce flux Fournisseur-Consommateur ? Nous allons décomposer ce terme avec les informations suivantes :

Provider in Context :

Le Context Provider donnera toutes les valeurs que nous devons transmettre globalement et l'un des composants de niveau enfant dans l'arbre peut exiger. Par exemple, un thème pourrait comporter des valeurs sombres/claires, ainsi que les langues dont nous aurions besoin sur les composants enfants. Nous pouvons utiliser Provider pour envelopper le composant et transmettre les valeurs que le composant enfant peut attendre. valeurs. Il peut récupérer les valeurs qui ont été transmises au même fournisseur.

Après cela, nous construirons un fournisseur et définirons le contexte au niveau le plus élevé possible. Nous pouvons utiliser le code suivant pour consommer ces valeurs sur le composant qui le nécessite :

Maintenant que nous comprenons le fonctionnement de Context, nous allons passer en revue des exemples de ce qu'est le forage d'accessoires et quelles alternatives il existe pour résoudre le problème de perçage des accessoires.

Pour afficher le perçage des accessoires, nous avons trois composants :

Users.js

UsersList.js

UsersList.js[19659006]

UserItem.js

Dans l'exemple ci-dessus, on peut voir que les propriétés « onDelete » du composant « Users » sont requises par le Le composant « UserItem », et bien que ces valeurs ne soient pas directement disponibles dans le composant « UserItem », elles doivent transiter par le composant « UsersList » même si ce composant ne les nécessite pas. Voyons maintenant comment résoudre les problèmes à l'aide de la « notion de contexte ». Flux fournisseur-consommateur.

Commençons par le flux fournisseur et voyons comment nous pouvons fournir des valeurs avec l'assistance du fournisseur. Pour construire et fournir des valeurs via Context, nous allons créer un seul fichier appelé « context/userContext.js ».

userContext.js

« React.createContext » pour créer un contexte et le stocker dans la variable « UserContext », puis utilisez « UserContext.Provider » pour générer un wrapper qui fournira des valeurs à tous les composants à l'intérieur de ce wrapper.

Pour transmettre le valeurs à travers Context, nous avons construit un contexte et un fournisseur. Nous devrons apporter certains ajustements à ces composants. Jetons un coup d'œil un par un. section ci-dessus). De plus, nous n'avons exposé que les valeurs dans les propriétés de valeur « UserProvider » qui devraient être présentes dans Context et accessibles par d'autres composants enveloppés à l'intérieur.

Les propriétés « onDelete » du composant « UsersList » ont été supprimées car elles peuvent désormais accessible via Context.

UsersList.js

Le prop "onDelete" que nous avons envoyé plus tôt a été supprimé car il n'est pas utilisé dans ce composant.

UserItem.js

Nous utiliserons les valeurs fournies par le contexte « UserProvider » dans ce composant. Le hook « useContext » sera utilisé pour consommer les valeurs de Context. Plus d'informations sur les hooks peuvent être trouvées ici.

Nous avons utilisé les valeurs extraites de « UserContext » pour récupérer et utiliser « onDelete ». C'est le composant où nous avons exécuté le flux fournisseur-consommateur du flux de consommateur de contexte. Dans le contexte. Ce lien vous fournira de plus amples informations sur Context. Pour plus d'informations sur React Context, contactez nos experts dès aujourd'hui.

À propos de l'auteur

Rashmi est consultant technique chez Perficient et travaille actuellement en tant que développeur front-end au sein de l'équipe CAT. Elle aime explorer de nouvelles choses dans les technologies front-end.

En savoir plus sur cet auteur