Réagir useContext Hook
Contexte de réaction
React Context est un moyen de gérer l'état globalement.
Il peut être utilisé avec le useStatecrochet pour partager l'état entre des composants profondément imbriqués plus facilement qu'avec useStateseul.
Le problème
L'état doit être détenu par le composant parent le plus élevé de la pile qui nécessite l'accès à l'état.
Pour illustrer, nous avons de nombreux composants imbriqués. Le composant en haut et en bas de la pile doit accéder à l'état.
Pour ce faire sans contexte, nous devrons passer l'état en tant que "accessoires" à travers chaque composant imbriqué. C'est ce qu'on appelle le "forage d'appui".
Exemple:
Passer des "accessoires" à travers des composants imbriqués :
import { useState } from "react";
import ReactDOM from "react-dom";
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</>
);
}
function Component2({ user }) {
return (
<>
<h1>Component 2</h1>
<Component3 user={user} />
</>
);
}
function Component3({ user }) {
return (
<>
<h1>Component 3</h1>
<Component4 user={user} />
</>
);
}
function Component4({ user }) {
return (
<>
<h1>Component 4</h1>
<Component5 user={user} />
</>
);
}
function Component5({ user }) {
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));
Même si les composants 2 à 4 n'avaient pas besoin de l'état, ils devaient transmettre l'état pour qu'il puisse atteindre le composant 5.
Obtenir une certification!
95 $ S'INSCRIRE
La solution
La solution est de créer un contexte.
Créer un contexte
Pour créer un contexte, vous devez l'importer createContextet l'initialiser :
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Ensuite, nous utiliserons le fournisseur de contexte pour envelopper l'arborescence des composants qui ont besoin du contexte d'état.
Fournisseur de contexte
Enveloppez les composants enfants dans le fournisseur de contexte et fournissez la valeur d'état.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Désormais, tous les composants de cette arborescence auront accès au contexte utilisateur.
Utilisez le useContextcrochet
Pour utiliser le contexte dans un composant enfant, nous devons y accéder à l'aide du useContextcrochet.
Tout d'abord, incluez le useContextdans l'instruction d'importation :
import { useState, createContext, useContext } from "react";
Ensuite, vous pouvez accéder au contexte utilisateur dans tous les composants :
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Exemple complet
Exemple:
Voici l'exemple complet utilisant React Context :
import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext();
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}
function Component2() {
return (
<>
<h1>Component 2</h1>
<Component3 />
</>
);
}
function Component3() {
return (
<>
<h1>Component 3</h1>
<Component4 />
</>
);
}
function Component4() {
return (
<>
<h1>Component 4</h1>
<Component5 />
</>
);
}
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
ReactDOM.render(<Component1 />, document.getElementById("root"));