Le crochet useContext de React

React Hooks vise à résoudre les difficultés de la réutilisation logique en nous permettant d’écrire des composants qui ont accès à des fonctionnalités telles que l’état, le contexte, les méthodes de cycle de vie, la référence, etc. Dans cet article, nous nous concentrerons sur le crochet useContext – un crochet utile qui permet aux composants d’accéder aux données sans avoir besoin de s’appuyer sur des accessoires.

Lors de la gestion des données entre les composants parent et enfant, React nous donne la possibilité d’utiliser quelque chose appelé accessoires pour transmettre des données de parent à enfant. Les accessoires ne peuvent circuler que dans une seule direction, des composants parents aux composants enfants (et plus bas). Lorsque des changements d’état se produisent sur les éléments parents, React restituera les composants qui dépendent de ces valeurs.

L’utilisation d’accessoires fonctionne bien dans la plupart des cas. Cependant, lorsque vous travaillez dans de grandes applications avec un grand nombre de composants dans l’arborescence des composants, les accessoires peuvent devenir difficiles à maintenir car les accessoires doivent être déclarés dans chaque composant dans l’arborescence des composants.

Contextedans React, peut nous faciliter la tâche dans des situations comme celle-ci.

Contexte

Le contexte dans React fournit un moyen de transmettre des données à travers une arborescence de composants sans avoir besoin de perceuse à hélice (c’est-à-dire, passer les accessoires manuellement à chaque niveau). Nous allons passer par un exemple simple pour illustrer comment cela peut être fait.

Pour commencer, nous devons d’abord créer l’objet Context avec le createContext() fonction.

import React, { createContext } from "react";

const Context = createContext();

Pour que le contexte soit disponible dans l’ensemble de l’arborescence des composants, nous devons envelopper le balisage du composant parent avec le fournisseur de contexte pour que tous les composants enfants s’abonnent aux modifications de contexte.

Si nous avons un <App /> composant qui agit en tant que composant parent de l’application, l’utilisation du fournisseur de contexte ressemblerait à quelque chose comme suit :

import React, { createContext } from "react";

const Context = createContext();

const App = () => {
  return <Context.Provider></Context.Provider>;
};

Lors de la déclaration du fournisseur de contexte, nous continuerons et spécifierons la valeur de contexte dans le value accessoire de <Context.Provider>. C’est ainsi que nous allons fournir quelques données initiales pour notre exemple.

import React, { createContext } from "react";

const Context = createContext();

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      
    </Context.Provider>
  );
};

Nous allons maintenant supposer <App /> est de rendre un composant enfant nommé <Child />.

import React, { createContext } from "react";

const Context = createContext();

const Child = () => {
  return <div>This is the child component!</div>;
};

const App = () => {
  return (
    <Context.Provider>
      <Child />
    </Context.Provider>
  );
};

Nous pouvons avoir le <Child /> composant récupère la valeur de contexte actuelle à l’aide du useContext Accrocher.

useContext

Le useContext Hook fournit aux composants fonctionnels l’accès au contexte valeur pour un objet de contexte. Il:

• Prend l’objet de contexte (c’est-à-dire la valeur renvoyée par React.createContext) comme seul argument qu’elle accepte.
• Et renvoie la valeur de contexte actuelle telle qu’elle est donnée par le fournisseur de contexte le plus proche.

Dans cet esprit, nous aurons le <Child /> composant dans notre exemple, utilisez le useContext crochet pour accéder au data propriété disponible dans notre contexte d’application et rendre sa valeur dans son balisage.

import React, { createContext, useContext } from "react";

const Context = createContext();

const Child = () => {
  const context = useContext(Context);
  return <div>{context.data}</div>;
};

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      <Child />
    </Context.Provider>
  );
};

Avec ces changements, nous remarquerons les données du parent <App /> composant être rendu dans le <Child /> composant à l’aide de l’API de contexte.

j’utilise le Extension Google Chrome des outils de développement React pour visualiser les données de contexte dans l’arborescence des composants.

Avec Context, nous remarquerions le même comportement que nous avons vu ci-dessus même si nous avions de nombreux composants enfants dans l’arborescence de la hiérarchie des composants. A titre d’exemple, supposons que nous ayons <Child />, <Child2 />,
<Child3 />,
<Child4 /> et <Child5 /> composants où chaque composant enfant est un parent de l’autre.

Nous aurons le composant le plus bas (<Child5 />) tentent d’accéder et de restituer la valeur des données de contexte dans son balisage.

import React, { createContext, useContext } from "react";

const Context = createContext();

const Child5 = () => {
  const context = useContext(Context);
  return <div>{context.data}</div>;
};

const Child4 = () => {
  return <Child5 />;
};

const Child3 = () => {
  return <Child4 />;
};

const Child2 = () => {
  return <Child3 />;
};

const Child = () => {
  return <Child2 />;
};

const App = () => {
  return (
    <Context.Provider value={{ data: "Data from context!" }}>
      <Child />
    </Context.Provider>
  );
};

Données du parent <App /> composant sera rendu dans le <Child5 /> composant sans avoir besoin de prop-percer les données à travers chaque composant de l’arborescence, grâce à Context !

Accessoires vs contexte

Quand faut-il décider d’utiliser des accessoires plutôt que du contexte ? Il y a des avantages et des inconvénients à chaque approche.

Avec des accessoires :

• Nous avons un modèle clairement défini de transmission des données d’un niveau à la fois sans avoir besoin de tirer parti d’API ou de crochets supplémentaires (pro).
• Cependant, le modèle de transmission des données d’accessoires un niveau à la fois peut être fastidieux si nous devions avoir un grand nombre de composants dans notre arborescence de composants (con).

Avec contexte :

• Nous avons la possibilité de faire en sorte qu’un composant enfant accède aux données d’un composant parent plusieurs niveaux au-dessus sans qu’il soit nécessaire de transmettre ces données à chaque niveau (pro).
• Cependant, Context peut rendre le débogage difficile si des bogues surviennent. Le débogage est plus susceptible d’être difficile si nous avions de nombreux objets et fournisseurs de contexte différents dans une application à grande échelle (contre).

Le contexte est mieux utilisé pour à l’échelle de l’application données clients. Des informations telles que les informations sur le thème, les préférences locales / linguistiques, les informations d’authentification de l’utilisateur, etc. sont mieux conservées dans Context, car tout composant d’une application peut avoir besoin d’accéder à ces données à tout moment.

Les accessoires sont mieux utilisés lorsque les données doivent être isolées dans quelques ensembles de composants uniquement.

Conclure

Cet article couvre le concept principal et le cas d’utilisation avec l’utilisation de useContext accrocher. À tout moment, nous voulons que les données client soient disponibles dans un grand nombre de composants React, nous devrions penser à tirer parti de l’API Context et du useContext accrocher.