Contexte dans React.js

Les props sont des arguments passés aux composants React. dans React, nous utilisons des accessoires pour transférer les données du composant parent vers le composant enfant. Parfois, nous devons transmettre des données du composant parent au composant petit-enfant et nous devons écrire les accessoires à chaque étape du composant jusqu'à ce que nous enrichissions le composant petit-enfant comme nous en avons besoin, si nous avons trois niveaux de profondeur du parent à l'enfant, ce sera un beaucoup d'accessoires d'écriture.

Il existe des moyens de ne pas transférer les données étape par étape, mais directement vers le composant petit-enfant. une façon est React-Redux, qui est un moyen de créer un magasin et de collecter des données importantes dans ce magasin et d'utiliser toutes les données à l'intérieur du magasin pour n'importe quel composant que nous voulons.

une autre façon est d'utiliser le contexte, c'est-à-dire de créer un nouveau composant, ce nouveau composant contient toutes les données que nous ajoutons en tant que valeur, et entoure ce composant d'autres composants. Ainsi, nous pourrions être en mesure de partager cette valeur avec les composants environnants.

Expliquons ce concept avec un exemple ;

J'ai pris cet exemple d'une vidéo YouTube qui expliquait le concept très bien et en douceur.

Avec cet exemple, nous avons un tableau de films qui a 3 films avec leurs noms, prix et identifiants. Avec cette application, nous allons afficher ces fonctionnalités dans le navigateur.

sur l'image ci-dessous, j'ai un dossier d'application et 3 composants appartiennent à ce dossier, et les entoure de MovieProvider.

<FilmProvider>

<Nav />

<Liste de films />

<Ajouter un film />

<FilmProvider />

Je mentionnerai ce MovieProvider dans une minute.

J'ai créé le fichier MovieContext.js dans src, ce fichier stocke essentiellement toutes les données des films avec useState.

Nous avons ce fichier qui contient tous les films, comment puis-je utiliser ces films dans d'autres composants sans utiliser la fonctionnalité des accessoires ?

Tout d'abord, nous devons importer createContext de react,

puis fort ceci dans un const MovieContext, comme à la ligne 4,

Nous exportons ceci, car nous devons l'utiliser dans d'autres composants.

Nous avons également, la fonction MovieProvider, qui a tous les films, retournant

<MovieContext.Provider value={[films, setMovies]} >

{props.enfants }

</MovieContext.Provider value={[films, setMovies]} >

MovieContext.Provider est un moyen de transmettre des données aux composants enfants, nous avons d'abord créé le contexte, puis nous l'avons appliqué à l'objet fournisseur, en l'appliquant à tous les enfants de ce <movieContext.Provider.

Regardons le concept de useContext,

comme vous pouvez le voir sur l'image ci-dessous, nous avons un composant MovieList, qui appartient au composant App, ce composant doit avoir tous les films que nous pourrions faire, movies.map et avoir <Movie /> pour chaque film composant,

Alors, comment amenons-nous tous les films de MovieContext vers ce composant jusqu'ici ?

Ainsi, nous utilisons la fonction useContext et importons MovieContext, pour apporter tous les films au composant MovieList. Lorsque nous faisons cela, toute la valeur à l'intérieur du MovieContext.Provider viendra au composant MovieList et

sur la ligne 11, on signe les films avec ça,

const [films, setMovies] = useContext(MovieContext)

nous faisons le reste avec la ligne 16 pour avoir la composante individuelle de chaque coup.

Juste pour vous montrer un autre composant qui utilise useContext ici sur l'image ci-dessous, nous avons un composant Nav.js, il appartient également à App.js, nous appliquons les mêmes règles que dans le composant MovieList, nous importons useContext et appliquons la ligne 8 avec useContext.

C'est tout, vous pouvez utiliser tous les films où que vous soyez.

Ressources