Fermer

mai 6, 2021

Comprendre l'API de contexte React


Découvrez le fonctionnement de l'API de contexte dans React et les meilleurs moments pour l'utiliser pour éviter le forage de prop dans votre application.

L'une des meilleures choses à propos de React est que nous avons de nombreuses façons différentes de résoudre des problèmes spécifiques . Nous avons quelques bibliothèques de formulaires différentes, un tas de bibliothèques CSS et, pour la partie la plus importante de React, nous avons beaucoup de bibliothèques différentes spécifiques aux problèmes de données d'état dans React.

Identifier quand utiliser une certaine bibliothèque dans notre projet est une compétence que nous développons par l'expérience. Surtout dans React, où nous avons tant de bibliothèques parmi lesquelles choisir, nous pourrions parfois finir par installer et utiliser des bibliothèques dont nous n'avons pas besoin.

L'API de contexte est une API React qui peut résoudre de nombreux problèmes auxquels les applications modernes sont confrontées liés à la gestion des états et à la manière dont ils transmettent l'état à leurs composants Au lieu d'installer une bibliothèque de gestion d'état dans votre projet qui finira par coûter cher aux performances de votre projet et augmenter la taille de votre bundle, vous pouvez facilement utiliser l'API de contexte et vous en sortir.

Comprenons ce qu'est l'API de contexte, ses problèmes

Pourquoi l'API de contexte?

L'un des concepts de React est de diviser votre application en composants, à des fins de réutilisation. Donc, dans une application React simple, nous avons quelques composants différents. Au fur et à mesure que notre application se développe, ces composants peuvent devenir énormes et impossibles à maintenir, nous les décomposons donc en composants plus petits.

C'est l'un des meilleurs concepts de React: vous pouvez créer un ensemble de composants et avoir une application entièrement maintenable et concise, sans avoir à créer un très gros composant pour traiter l'ensemble de votre application.

Après avoir divisé les composants en composants plus petits pour des raisons de maintenabilité, ces petits composants peuvent maintenant avoir besoin de certaines données pour fonctionner correctement. Si ces petits composants ont besoin de données pour fonctionner, vous devrez transmettre des données via des accessoires du composant parent au composant enfant. C'est là que nous pouvons ralentir notre application et causer des problèmes de développement.

Imaginons que nous ayons un composant appelé Notes qui est chargé de rendre un tas de notes.

 const   Notes   =   ()   =>   {
   const   [ notes ]   =   useState  ([19659015] [
     {
      titre :   "Première note" 
      description :   "Ceci est ma première note" 
      done :   false 
    } 
  ] ) ; 
   return   (
     < div > 
     < h1 >  Notes  < /  h1 > 
       { notes .  map  ( note  =>   {
         return   (
         < div > 
           < h1 >  { note .  titre }  < /  h1 > 
           < h3 >  { note .  description }  < /  h3 > 
           < p >  { note .  fait ?   "done!"  :   "not done!" }  < /  p > 
         < /  div > 
        ) ; 
      } ) } 
     < /  div > 
  ) ; 
} ; 

En regardant simplement ce code, nous pouvons remarquer que nous pouvons diviser ce composant en composants plus petits, faisant de notre code plus propre et plus facile à entretenir. Par exemple, nous pourrions créer un composant appelé Note et à l'intérieur de ce composant, nous aurions trois autres composants: Title Description and Done .

 const   Notes   =   ()   =>   {
   const   [ notes ]   =   useState  ( [
     {
      titre :   "Première note" 
      description :   "Ceci est ma première note" 
      done :   false 
    } 
  ] ) ; 
   return   (
     < div > 
       < h1 >  Notes  < /  h1 > 
       { notes .  map  ( ( { title  description  done } )   =>   {
         return   <  Note title  =  { title }  description  =  { description }  done  = [19659015] { done }   / > ; 
      } ) } 
     < /  div  > 
  ) ; 
} ; 

 const   Note   =   ( { title  description  fait } )   => [19659014] {
   return   (
     < div > 
       < Title title  =  { title } [19659013] / > 
       < Description description  =  { description }   / > 
       < Fait terminé  =  { done }   / > 
     < /  div > 
  ) ; 
} ; 

 const   Title   =   ( { title } )   =>   {
   return [19659013] < h1 >  { titre }  < /  h1 > ; 
}  ; 

 const   Description   =   ( { description } )   =>   {
   return   <  h3 >  { description } [19659038] < /  h3 > ; 
} ; 

 const   Description   =   ( { description } )   =>   {
   return   < h3 >  { description }  <  /  h3 > ; 
} ; 

Nous avons maintenant quelques composants, et nous avons certainement augmenté la réutilisabilité et la maintenabilité de notre exemple d'application. Mais, à l'avenir, si cette application prend de l'ampleur et que nous ressentons le besoin de diviser ces composants en composants plus petits, nous pourrions avoir un problème. Parfois, vous pouvez transmettre plus d'accessoires que vous n'en avez besoin ou même oublier de transmettre les accessoires dont vous avez besoin, renommer les accessoires à travers les composants sans vous en rendre compte, etc. Si vous transmettez des données via des accessoires du composant parent à un quatrième ou cinquième niveau , vous ne réutilisez pas et n’écrivez pas de code maintenable, ce qui pourrait nuire à votre application à l’avenir. Cela peut frustrer et ralentir votre développement à moyen et à long terme – le fait de passer des accessoires encore et encore à vos composants causera des problèmes futurs dans votre application.

C'est l'un des principaux problèmes que l'API Context est venu résoudre.

API de contexte

L'API de contexte peut être utilisée pour partager des données avec plusieurs composants, sans avoir à passer manuellement les données via les accessoires. Par exemple, dans certains cas d'utilisation, l'API de contexte est idéale pour: la thématisation, la langue de l'utilisateur, l'authentification, etc.

createContext

Pour commencer avec l'API de contexte, la première chose à faire est de créer un contexte à l'aide de fonction createContext de React.

 const  NotesContext  =   createContext  ( [] ) ; 

Le La fonction createContext accepte une valeur initiale, mais cette valeur initiale n'est pas requise.

Après avoir créé votre contexte, ce contexte a maintenant deux composants React qui vont être utilisés: Provider et Consumer .

Provider

Le composant Provider va être utilisé pour envelopper les composants qui vont avoir accès à notre contexte.

 < ] NotesContext .  Provider value  =  { this .  state .  notes } > 
 ... 
 < /  Notes .  Provider > 

The Provider Le composant reçoit un accessoire appelé value accessible à partir de tous les composants qui sont enveloppés dans Provider et il sera chargé d'accorder l'accès aux données de contexte. [19659234] Consommateur

Après avoir encapsulé tous les composants qui vont avoir besoin d'accéder au contexte avec le composant Provider vous devez dire quel composant va consommer ces données.

Le Le composant Consumer permet à un composant React de s'abonner aux changements de contexte. Le composant rend les données disponibles en utilisant une prop de rendu.

 < NotesContext .  Consumer > 
   { values ​​ =>   < h1 >  { valeur  < /  h1 > } 
 < /  Notes .  Consumer > 

useContext

Vous utilisez peut-être React Hooks depuis un certain temps déjà, mais si vous ne savez pas encore ce que sont les React Hooks et comment ils fonctionnent, laissez-moi vous les expliquer très brièvement à vous:

Les React Hooks nous permettent de gérer les données d'état à l'intérieur des composants fonctionnels; maintenant, nous n'avons plus besoin de créer des composants de classe uniquement pour gérer les données d'état.

React a quelques hooks intégrés tels que useState useCallback useEffect etc. Mais celui dont nous allons parler et en savoir plus ici est le hook useContext .

Le hook useContext nous permet de connecter et de consommer un le contexte. Le hook useContext reçoit un seul argument, qui est le contexte auquel vous voulez avoir accès.

 const  notes  =   useContext  ( NotesContext ) ; 

Le useContext est bien meilleur et plus propre que le composant Consumer – nous pouvons facilement comprendre ce qui se passe et augmenter la maintenabilité de notre application.

Créons maintenant un exemple avec l'API de contexte et le hook pour voir comment cela s'applique dans une application réelle. Nous allons créer une application simple pour vérifier si l’utilisateur est authentifié ou non.

Nous allons créer un fichier appelé context.js . Dans ce fichier, nous allons créer notre contexte et notre fournisseur, importer les hooks useState et useContext de React, et créer notre contexte qui sera appelé AuthContext . La valeur initiale de notre AuthContext ne sera pas définie pour le moment.

 import  React   { useState  useContext }   de   "react" ; 
 const  AuthContext  =  React .  createContext  ( undefined ) ; 

Maintenant, nous allons créer un composant fonctionnel appelé AuthProvider qui recevra enfants comme accessoires. Dans ce composant, nous allons rendre plus de composants et gérer les données d'état que nous voulons partager avec les autres composants.

 const   AuthProvider   =   ( { children } )   =>   {
 ... 
} ; 

Premièrement, nous allons créer notre état auth . Ce sera un simple état booléen pour vérifier si l'utilisateur est authentifié ou non. De plus, nous allons créer une fonction appelée handleAuth qui sera chargée de changer notre état auth .

 const   [ auth  ,  setAuth ]   =   useState  ( false ) ; 
 const   handleAuth   =   ([19659015])   =>   {
   setAuth  (!  auth ) ; 
} ; 

Le Le fournisseur n'accepte pas les valeurs de tableau, nous allons donc créer un tableau appelé data qui contiendra notre état auth et notre handleAuth une fonction. Nous allons transmettre ces données comme valeur dans notre AuthContextProvider .

 const   AuthProvider   =   ( { enfants } )   =>   {
   const   [ auth  setAuth ]   =   useState  ( false ) ; 
   const   handleAuth   =   ()   =>   {
     setAuth [19659015] (!  auth ) ; 
  } ; 
   const  data  =   [ auth  ,  handleAuth ] ; 
   return   < AuthContext .  Provider value  =  { data } >  { enfants }    < /  AuthContext .  Provider > ; 
} [19659015]; 

Désormais, dans notre fichier context.js nous allons également créer un composant hook simple appelé useAuth que nous utiliserons pour consommer notre contexte. Si nous essayons d'utiliser ce composant en dehors de notre Provider une erreur sera générée.

 const   useAuth   =   ()   => [19659014] {
   const  context  =   useContext  ( AuthContext ) ; 
   if   ( context  = ==  undefined )   {
     throw   new   Error  ( "useAuth ne peut être utilisé que dans AuthProvider" ) ; 
  } 
   return  context ; 
} ; 

Ensuite, nous allons exporter notre AuthProvider et useAuth à la fin de notre fichier.

Maintenant, dans notre composant index.js nous devons importer le composant AuthProvider et encapsuler les composants auxquels nous voulons donner accès au contexte à l'intérieur de ce fournisseur.

 import   { AuthProv ider }   de   "./ context" ; 
ReactDOM .  render  (
   < React .  StrictMode > 
   < AuthProvider > 
   < App  / > 
   < /  AuthProvider > 
   < /  React .  StrictMode  > 
  rootElement
) ; 

Ensuite, dans notre fichier App.js nous allons gérer nos données de contexte. Nous devons d'abord importer le hook useAuth que nous avons créé et obtenir les auth et handleAuth de useAuth .

Créons un et, chaque fois que nous cliquons sur ce bouton, nous invoquerons la fonction handleAuth . Utilisons également un rendu ternaire d'un simple h1 pour vérifier si la valeur auth change lorsque nous cliquons sur le bouton.

 import   { useAuth }   de   "./ context" ; 
 const   App   =   ()   =>   {
   const   [ auth  handleAuth ]   =   useAuth  ( useAuth ) ; 
   return [19659014] (
     < div > 
       < h3 >  Est authentifié ?  < /  h3 > 
       < h1 >  { auth  ===   false  ?   "Not authenticated!"  : [19659025] "Authentifié!" }    < /  h1 > 
       < button onClick  =  { handleAuth } >  Changer d'auth  < /  bouton > 
     < /  div > 
  ) ; 
} [19659015]; 

Nous avons maintenant une application simple utilisant l'API de contexte. Notez que nous n'avons pas besoin de transmettre les accessoires du composant parent aux composants enfants.

L'API de contexte peut être très utile dans certains cas d'utilisation, comme l'authentification lorsque vous devez vérifier si l'utilisateur est authentifié dans quelques composants.

Conclusion

Dans cet article, nous en avons appris davantage sur l'API React Context. L'API de contexte est venu pour résoudre quelques problèmes différents que nous avions dans les applications React – l'un des plus importants est le forage prop. Nous avons créé un exemple en utilisant l'API de contexte dans un composant de classe, puis dans un composant fonctionnel. Nous avons également appris à utiliser le hook useContext.




Source link