Bonjour👋🏻,  Cet article est spécialement créé pour les débutants désireux d'apprendre des méthodes plus efficaces pour gérer l'état entre plusieurs composants. Il vise également à résoudre le problème courant du perçage d'accessoires, qui peut rendre votre code plus difficile à maintenir et à comprendre. Commençons par quel type de problème l'API de contexte résout.  Si vous préférez le format vidéo, alors voici le tutoriel que vous pouvez visionner sur ma chaîne YouTube.👇🏻   https://youtu.be/4p_VWn1AEvg?embedable=true  Qu’est-ce que le forage d’hélices ?  Vous savez que parfois vous devez transmettre des données d'un composant parent à un composant enfant, et vous finissez par transmettre des accessoires à travers un tas de composants intermédiaires ? C'est ce qu'on appelle   , et cela peut vite devenir compliqué. Passons en revue un exemple pour clarifier cela. le forage d'hélices    Comme le montre le diagramme, imaginez que vous avez récupéré des données dans le composant   , qui se trouve à la racine de votre application. Désormais, si un composant profondément imbriqué, par exemple le composant   , a besoin d'accéder à ces données, vous le transmettez généralement via les composants   et   en tant qu'accessoires avant qu'ils n'atteignent   . Cela peut devenir moche à mesure que votre application se développe. App Grandchild Parent Child Grandchild  Voici une autre représentation visuelle :    Dans l'exemple ci-dessus, le composant   a besoin de données utilisateur, mais ces données doivent d'abord transiter par les composants   et   , même si ces composants intermédiaires n'utilisent pas les données eux-mêmes. Alors, comment pouvons-nous nettoyer cela ? C'est là que l'API Context s'avère utile. Profile App Navigation  Forage d'accessoires :  Augmente le rendu des composants  Augmente le code passe-partout  Crée une dépendance de composant  Diminue les performances  API de contexte de réaction  L'API contextuelle dans React.js vous permet de transmettre des données entre composants sans avoir besoin de les transmettre en tant qu'accessoires à chaque niveau de l'arborescence des composants. Il fonctionne comme un système de gestion d'état global dans lequel vous définissez votre état dans un objet contextuel, puis vous pouvez facilement y accéder n'importe où dans l'arborescence des composants. Comprenons cela avec un exemple.    Comme vous pouvez le voir sur le diagramme, nous avons un objet contextuel qui stocke les données auxquelles plusieurs composants peuvent accéder. Ces données sont récupérées à partir d'API ou de services tiers. Avant d'accéder à ces données de contexte dans n'importe quel composant, nous devons envelopper tous les composants qui nécessitent ces données dans un composant fournisseur de contexte.  Si nous avons uniquement besoin d'accéder aux données des composants de navigation et de profil, nous n'avons pas besoin de terminer le composant d'application. Une fois que vous avez encapsulé les composants pertinents avec   , vous pouvez accéder directement aux données contextuelles dans n'importe quel composant qui les consomme. Ne vous inquiétez pas si vous ne le comprenez toujours pas ; Plongeons dans le code et voyons-le en action. ContextProvider  Comment utiliser l'API contextuelle ?  Tout d'abord, créons une application React à l'aide   . Copiez simplement les commandes suivantes pour configurer le projet. de Vite.js   npm create vite@latest  Ajoutez le nom de votre projet  Sélectionnez Réagir  Sélectionnez dactylographié parmi les options   cd project_name // to change to project directory npm install npm run dev  Ensuite, vous pouvez ouvrir votre serveur de développement   dans votre navigateur. http://localhost:5173  Commençons par créer les dossiers requis. Voici la structure des dossiers de notre projet.   src | components | context  Dans le dossier des composants, créons le fichier   et ajoutons le code suivant. Profile.jsx   import React from 'react' const Profile = () => { return ( <div>Profile</div> ) } export default Profile  Créez un composant supplémentaire appelé   dans le dossier des composants. Navbar.jsx   import Profile from './Profile' const Navbar = () => { return ( <nav style={{ display: "flex", justifyContent: "space-between", alignItems: "center", width: "90%", height: "10vh", backgroundColor: theme === "light" ? "#fff" : "#1b1b1b", color: theme === "light" ? "#1b1b1b" : "#fff", border: "1px solid #fff", borderRadius: "5px", padding: "0 20px", marginTop: "40px", }}> <h1>LOGO</h1> <Profile /> </nav> ) } export default Navbar  Importons ce composant   dans le fichier   . <Navbar /> App.jsx   import Navbar from "./components/Navbar"; function App() { return ( <main style={{ display: "flex", flexDirection: "column", justifyContent: "start", alignItems: "center", height: "100vh", width: "100vw", }} > <Navbar /> </main> ); } export default App;  Donc, fondamentalement, le composant   est l'enfant de   et   est l'enfant du composant   . <Profile /> <Navbar /> <Navbar /> <App />  Ajout d'une API de contexte  Créons le fichier   dans le dossier   . Ajoutez le code suivant au fichier. UserContext.jsx context   import { createContext, useEffect, useState } from "react"; export const UserContext = createContext(); export const UserProvider = ({ children }) => { const [user, setUser] = useState(null); const fetchUserData = async (id) => { const response = await fetch( `https://jsonplaceholder.typicode.com/users/${id}` ).then((response) => response.json()); console.log(response); setUser(response); }; useEffect(() => { fetchUserData(1); }, []); return ( <UserContext.Provider value={{ user, fetchUserData }} > {children} </UserContext.Provider> ); };  Tout d’abord, nous créons un objet   vide en utilisant   . Nous veillons à l'importer depuis   . Nous pouvons ajouter des valeurs par défaut à l'intérieur de l'objet contextuel, mais nous le gardons nul pour l'instant. UserContext createContext react  Ensuite, nous créons   , qui renvoie un fournisseur utilisant   , comme   . Il entoure les composants enfants et, dans la valeur, nous pouvons transmettre tout ce que nous voulons utiliser dans les composants enfants. UserProvider UserContext UserContext.Provider  À l'heure actuelle, nous utilisons   pour récupérer les données utilisateur. Le   fournit de faux points de terminaison d'API à des fins de test. La fonction   accepte   et utilise cet identifiant pour récupérer les données utilisateur. Ensuite, nous stockons la réponse dans l'état   . l'API jsonplaceholder jsonplaceholder fetchUserData id user  Nous appelons la fonction   dans   donc lors du chargement de la page, elle appelle la fonction et injecte les données dans l'état   . fetchUserData useEffect user  Utilisons maintenant ce contexte dans le composant   . Enveloppez le composant   à l'aide du   ; le même que le code suivant : <App /> <NavBar /> <UserProvider />   <UserProvider> <Navbar /> </UserProvider>  Utilisons l'état   dans le composant   . Pour cela, nous utiliserons le hook   . Cela prend   et fournit les valeurs que nous avons transmises dans   telles que l'état   et la fonction   . N'oubliez pas que nous n'avons pas besoin d'encapsuler le composant   puisqu'il se trouve déjà dans le composant   qui est déjà encapsulé avec le fournisseur. user <Profile /> useContext UserContext UserProvider user fetchUserData <Profile /> <Navbar />  Ouvrez le   et ajoutez le code suivant. Profile.jsx  const { user } = useContext(UserContext); if (user) { return ( <span style={{ fontWeight: "bold", }} > {user.name} </span> ); } else { return <span>Login</span>; }  Ici, nous utilisons l'état   du   . Nous afficherons le nom d'utilisateur s'il y a   , sinon nous afficherons juste un message de connexion. Maintenant, si vous voyez le résultat, il devrait y avoir un nom d'utilisateur dans le composant de la barre de navigation. C'est ainsi que nous pouvons utiliser directement n'importe quel état dans le contexte de n'importe quel composant. Le composant qui utilise cet état doit être encapsulé dans   . user UserContext user <Provider />  Vous pouvez également utiliser plusieurs contextes. Il vous suffit d'envelopper les composants du fournisseur dans un autre composant du fournisseur, comme indiqué dans l'exemple suivant.   <ThemeProvider> <UserProvider> <Navbar /> </UserProvider> </ThemeProvider>  Dans l'exemple ci-dessus, nous utilisons   qui gère l'état du thème. <ThemeProvider />  Vous pouvez regarder la vidéo YouTube ci-dessus pour voir l'exemple complet d'utilisation de plusieurs fournisseurs de contexte.  Optimisation du rendu dans l'API React Context  Un problème se produit lorsque vous utilisez l'API Context dans plusieurs composants. Chaque fois que l'état ou la valeur change dans l'API de contexte, elle restitue tous les composants abonnés à ce contexte particulier, même si tous les composants n'utilisent pas l'état modifié. Pour comprendre ce problème de nouveau rendu, créons un composant   qui utilise le contexte pour stocker et afficher les valeurs de comptage. <Counter />  Consultez l’exemple suivant. Vous pouvez créer un fichier   dans le dossier des composants et coller le code suivant. Counter.jsx   import { createContext, memo, useContext, useState } from "react"; const CountContext = createContext(); const CountProvider = ({ children }) => { const [count, setCount] = useState(0); return ( <CountContext.Provider value={{ count, setCount }}> {children} </CountContext.Provider> ); }; function CountTitle() { console.log("This is Count Title component"); return <h1>Counter Title</h1>; } function CountDisplay() { console.log("This is CountDisplay component"); const { count } = useContext(CountContext); return <div>Count: {count}</div>; } function CounterButton() { console.log("This is CounterButton component"); const { count, setCount } = useContext(CountContext); return ( <> <CountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </> ); } export default function Counter() { return ( <CountProvider> <CounterButton /> </CountProvider> ); }  Dans le code ci-dessus :  Tout d’abord, nous créons un objet   à l’aide  CountContext createContext.  Dans   nous avons un état pour stocker les valeurs de comptage. Nous envoyons   et la méthode   aux composants enfants via value prop. CountProvider, count setCount  Nous avons créé des composants séparément pour voir combien de fois les composants individuels sont restitués.    : Ce composant affiche uniquement le titre et n'utilise même aucune valeur du contexte. <CountTitle />    : ce composant affiche les valeurs de comptage et utilise l'état   du contexte. <CountDisplay /> count    : ce composant restitue à la fois le composant ci-dessus et un bouton qui augmente les valeurs de comptage à l'aide   . <CounterButton /> setCount  À la fin, nous encapsulons le composant   dans le composant   afin que les autres composants puissent accéder aux valeurs de comptage. <CounterButton /> CountProvider  Maintenant, si vous exécutez le code et cliquez sur le bouton   , vous verrez dans les journaux que chaque composant est restitué à chaque fois que l'état change. Le   n'utilise même pas de valeurs de comptage, mais il est en cours de rendu. Cela se produit parce que le composant parent de   qui est   utilise et met à jour la valeur de count et c'est pourquoi il est restitué. Increase <CountTitle /> <CountTitle /> <CounterButton />  Comment pouvons-nous optimiser ce comportement ? La réponse est   . Le   React vous permet d'éviter de restituer un composant lorsque ses accessoires sont inchangés. Après le composant   , ajoutons la ligne suivante. memo memo <CountTitle />   const MemoizedCountTitle = React.memo(CountTitle)  Maintenant, dans le composant   , où nous restituons le composant   , remplacez le   par   comme dans le code suivant : <CounterButton /> <CountTitle /> <CountTitle /> <MemoizedCountTitle />   <> <MemoizedCountTitle /> <CountDisplay /> <button onClick={() => setCount(count + 1)}>Increase</button> </>  Maintenant, si vous augmentez le nombre et vérifiez les journaux, vous devriez pouvoir voir qu'il ne restitue plus le composant   . <CountTitle />  API Redux et Contexte    est une bibliothèque de gestion d'état pour la gestion d'état complexe avec des transitions d'état plus prévisibles. Alors que l'API Context est conçue pour une gestion simple de l'état et la transmission de données via l'arborescence des composants sans perçage d'accessoires. Alors, quand choisir lequel ? Redux  Utilisez   pour une gestion d'état simple et localisée où l'état ne change pas fréquemment. l'API React Context  Utilisez   pour les besoins complexes de gestion d'état, en particulier dans les applications plus volumineuses où les avantages de sa gestion d'état structurée l'emportent sur la configuration supplémentaire. Redux  Il existe également une autre bibliothèque, qui constitue également une option populaire pour la gestion de l'État. Le   . recul de réaction    est une bibliothèque de gestion d'état pour React qui vise à fournir la simplicité de l'API Context avec la puissance et les performances de Redux. React Recoil  Si vous souhaitez en savoir plus sur   , faites-le-moi savoir dans les commentaires et je créerai des didacticiels approfondis sur ce sujet en fonction de vos commentaires. React Recoil  Conclusion  L'API contextuelle   offre un moyen puissant et efficace de gérer les états de plusieurs composants, résolvant ainsi efficacement le problème du forage d'accessoires. En utilisant l'API Context, vous pouvez simplifier votre code, réduire les rendus inutiles et améliorer les performances globales des applications. React.js  Bien que l'API Context soit idéale pour une gestion d'état simple, des applications plus complexes peuvent bénéficier de l'utilisation   ou d'autres bibliothèques de gestion d'état comme   . Comprendre quand et comment utiliser ces outils vous permettra de créer des applications React plus maintenables et évolutives. Redux React Recoil  Merci d'avoir lu cet article, j'espère que vous l'avez trouvé utile. Si vous souhaitez apprendre et créer des projets à l'aide de React, Redux et Next.js, vous pouvez visiter ma chaîne YouTube ici :  CodeBucks  Voici mes autres articles que vous aimeriez peut-être lire :   Comment implémenter un défilement fluide dans Next.js avec Lenis et GSAP   Comment obtenir l'emplacement de l'utilisateur dans React.js   Top 10 des thèmes VS Code populaires que vous devriez essayer  Visitez mon blog personnel :  DevDreaming

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Helping you to learn code! 
here you'll find tutorials around web development. Keep Coding...😜

2021 - HackerNoon Contributor of the Year - CSS3

Checkout my new website🤩

Portfolio

Hire Me

Buy Me a Coffee

2021 - HackerNoon Contributor of the Year - REDUX

Cet audio est produit dans la langue originale de l'histoire !

Comment simplifier la gestion de l'état avec l'API contextuelle React.js - Un didacticiel

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Appuyez pour gagner : Telegram pourrait intégrer les 10 prochains milliards d'utilisateurs de crypto avant Solana

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

Croissance des crypto-monnaies : créer des profils d'utilisateurs efficaces

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps