Comprendre l'API de contexte

Dans un projet React.js, nous créons des composants, puis transmettons des accessoires à ces composants. Nous pouvons transmettre ces accessoires à des niveaux infinis de composants imbriqués. Mais, s'il y a beaucoup de composants et que tous ont besoin d'accessoires partagés différents, le projet devient ingérable. C'est là qu'intervient l'API Context. Elle nous permet d'utiliser des accessoires à des niveaux imbriqués profonds sans faire de forage d'accessoires.

La façon dont nous l'utilisons consiste à créer d'abord un contexte et pour cela, nous utilisons le hook createContext de react. Nous pouvons également lui transmettre une valeur par défaut si nous le souhaitons. Ensuite, nous créons un composant de fournisseur pour ce contexte. L'objet context a un composant provider où nous transmettons la valeur du contexte en tant que prop. Ici, j'ai passé à la fois la valeur de contexte ainsi qu'une fonction qui permettra aux composants consommateurs de modifier la valeur.

Tout composant imbriqué dans le fournisseur aura accès à la valeur de ce contexte particulier. Nous pouvons même imbriquer un composant dans plusieurs fournisseurs et il consommera les valeurs de chacun d'eux.

Ici, les composants Player et Match consommeront également les valeurs de FootballProvider et OtherProvider.

Pour utiliser la valeur du fournisseur, nous devons utiliser le crochet useContext.

Cela permet l'utilisation de valeurs partagées entre des composants profondément imbriqués sans composants intermédiaires contenant des valeurs telles que des ponts. Un inconvénient de l'utilisation de l'API de contexte est que chaque fois que la valeur du contexte change, tous les composants sous celui-ci seront restitués. Mais il ne serait pas tout à fait juste d'appeler cela un inconvénient, car ce comportement est également bénéfique dans certains scénarios.