Reagisci useContext Hook
Contesto di reazione
React Context è un modo per gestire lo stato a livello globale.
Può essere utilizzato insieme useStateall'Hook per condividere lo stato tra componenti profondamente nidificati più facilmente che da useStatesolo.
Il problema
Lo stato dovrebbe essere detenuto dal componente padre più alto nello stack che richiede l'accesso allo stato.
Per illustrare, abbiamo molti componenti nidificati. Il componente nella parte superiore e inferiore dello stack deve accedere allo stato.
Per farlo senza Context, dovremo passare lo stato come "props" attraverso ogni componente nidificato. Questo è chiamato "perforazione dell'elica".
Esempio:
Passare "oggetti di scena" attraverso componenti nidificati:
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"));
Anche se i componenti 2-4 non avevano bisogno dello stato, dovevano trasmettere lo stato in modo che potesse raggiungere il componente 5.
Ottieni la certificazione!
ISCRIVITI A $95
La soluzione
La soluzione è creare contesto.
Crea contesto
Per creare il contesto, devi importarlo createContexte inizializzarlo:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Successivamente utilizzeremo il Context Provider per eseguire il wrapping dell'albero dei componenti che necessitano dello stato Context.
Fornitore di contesto
Avvolgi i componenti figlio nel provider di contesto e fornisci il valore dello stato.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Ora, tutti i componenti in questo albero avranno accesso al Contesto dell'utente.
Usa il useContextgancio
Per utilizzare il contesto in un componente figlio, è necessario accedervi utilizzando useContextHook.
Innanzitutto, includi useContextnella dichiarazione di importazione:
import { useState, createContext, useContext } from "react";
Quindi puoi accedere al Contesto utente in tutti i componenti:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Esempio completo
Esempio:
Ecco l'esempio completo utilizzando 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"));