Comment utiliser le contexte dans React

Bienvenue, les amis !


Aujourd'hui, nous passons en revue les bases d'un React Hook appelé useContext. useContext est un outil puissant qui va au-delà de useState pour créer un état de type global qui peut transmettre des informations aux composants enfants et petits-enfants sans transmettre directement les accessoires.

Mais je prends de l'avance.
Si vous n'êtes pas familier avec useState, sautez et lisez d'abord mon article précédent, puis revenez et préparez-vous à être surpris !


Comment utiliser « useState » : https://dev.to/deborah/how-to-use-state-in-react-2pah

Maintenant que vous êtes au courant de « useState », plongeons-nous dans « useContext » !

Qu'est-ce que useContext ? :

useContext est idéal pour les données qui doivent être placées sur une portée globale (comme un nom d'utilisateur qui gardera quelqu'un connecté tout au long de l'application) mais ce n'est pas le raccourci ultime pour transmettre les accessoires aux composants enfants.
Cependant, useContext nous permet de transmettre des données sans transmettre directement des accessoires et est donc extrêmement utile lorsque nous rencontrons des données auxquelles plusieurs composants enfants doivent accéder ou qui doivent être mises à disposition dans l'intégralité de l'application.

Pour que useContext soit opérationnel, nous devons suivre deux étapes : d'abord, nous devons créer un objet de contexte ("createContext"), puis nous devons accéder à la valeur via un fournisseur en utilisant le hook "useContext". .

Les exemples suivants ont été simplifiés afin de vous donner une meilleure idée de ce qu'est useContext et de comment l'utiliser, mais vous devez savoir que createContext est souvent déclaré dans un fichier distinct. Cependant, je compare « Parent.js » à un fichier « App.js » typique (un composant situé au sommet de la hiérarchie des composants). Parent.js est l'endroit où j'ai défini toutes mes variables d'état, les fonctions qui mettent à jour ces variables d'état et effectué des récupérations dans la base de données à l'aide de useEffect. J'ai choisi de déclarer createContext dans mon composant de niveau supérieur au lieu de créer son propre fichier pour simplifier cette explication afin que vous puissiez mieux comprendre les concepts fondamentaux de Context.

Cela dit, commençons par le tout début : createContext !

1. La première chose que nous devons faire est de déclarer et d'exporter une variable appelée « Contexte » que nous utiliserons plus tard dans nos composants enfants [nous créons une variable maintenant afin de rendre notre code plus simple et ainsi nous pouvons placer une valeur (données) à l'intérieur pour y accéder plus tard] :

export Context = React.createContext();

« Contexte » est un objet contextuel créé en appelant « createContext ». L'objet contextuel contient un composant appelé Provider que nous allons désormais pouvoir appeler puis transmettre les variables et fonctions que nous souhaitons conserver à notre niveau « global ».

2. Avec notre variable « Contexte », passons maintenant à notre JSX dans l'instruction return. Ici, nous appellerons « Contexte » et l'encapsulerons dans des balises d'ouverture (crochets), et appellerons également Provider comme ceci :




return(
    <Context.Provider >
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

Afin de compléter « Context.Provider », nous devons également fournir une valeur à « Provider ». C'est ici que nous passerons un objet avec toutes les variables et fonctions que nous appellerons avec « Contexte » dans les composants enfants :

return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

Il est TRÈS IMPORTANT de noter que nous devons mettre TOUS les composants enfants qui utiliseront les variables et les fonctions entre les balises. Par exemple :

return(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        <Child />
    <Components />
    <Go />
    <Here />
    </Context.Provider>
);

Remarquez que nous n'avons pas besoin de transmettre d'accessoires directement aux composants enfants (comme nous le ferions avec 'useState') tant que nous mettons les accessoires dans 'value'.

Maintenant que nous avons utilisé createContext et transmis tous nos éléments globaux à 'Context.Provider', nous sommes prêts à passer aux composants enfants et à voir comment utiliser 'Context'.

3. Let’s go onto a child component which (for the sake of this example) is housed in the file "Child.js". As life is with coding: if you want to use something, you need to import it. Let’s go ahead and get ‘Context’ from where we declared it in ‘Parent.js’ so we can use it in this child component (‘Child.js’):

import Context from ‘./Parent.js’;

4. Now that we have access to ‘Context’ in the child component, we now need to import 'useContext' into the file so we can pass 'Context' to it (more on that shortly):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Great! Now let’s use 'useContext'. First we need to declare a variable to use 'useContext' with. We’ll do this inside the component in a similar fashion to how we would declare useState:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

In this code we are using curly braces {} to denote destructuring assignment. That's a fancy way of saying we are able to call multiple variables and functions stored in Context. We are also passing ‘Context’ to 'useContext' so we can access the values defined in Context.Provider (which we declared in ‘Parent.js’).



6. Believe it or not, you are all set! You can now use the context values in your code just like you would normally use State. For example:

const expId = example.id;

or

setExample(newExample);

Let’s Recap:

Congratulations! You now have all the tools to get started with createContext and useContext. You understand that useContext allows you to create something of a ‘global state' that can pass variables and functions to components without passing props directly through child components.

We also delved into the six steps required to get context working in your applications. You are now ready to begin coding with createContext and useContext, but in case you ever need a quick-start guide, here you go:


In your parent component, declare and export a variable called 'Context' using 'createContext':

export const Context = React.createContext();

In the parent component’s JSX, wrap all child components that need access to context in Context.Proivder, and pass any variables/functions inside an object:

<Context.Provider value={{ example, setExample, handleExample }}>
   //Child components
</Context.Provider>

In you child component, import 'useContext':

import React, { useContext } from ‘react’;

Also import ‘Context’ from the parent component:

import Context from “./Parent.js’;

Then use useContext and pass it your ‘Context’ variable:

const { example, handleExample } = useContext(Context);

Finally, use the context you now have access to (in our examples above this would be 'example' and 'handleExample') however you need to in the child component.

Well done! And until next time, happy coding!

One last note, if you would like to delve deeper into this subject, here are the official documentation resources I also referenced while learning useContext and writing this blog:


Official Documentation:
https://react.dev/reference/react/createContext


Legacy Official Documentation, still somewhat helpful for understanding useContext:
https://legacy.reactjs.org/docs/context.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!