React useContext Hook
Kontekst reakcji
React Context to sposób na globalne zarządzanie stanem.
Może być używany razem z useStateHookiem, aby łatwiej dzielić stan między głęboko zagnieżdżonymi komponentami niż z useStatesamym.
Problem
Stan powinien być utrzymywany przez najwyższy komponent nadrzędny w stosie, który wymaga dostępu do stanu.
Aby to zilustrować, mamy wiele zagnieżdżonych komponentów. Komponent na górze i na dole stosu potrzebuje dostępu do stanu.
Aby to zrobić bez kontekstu, będziemy musieli przekazać stan jako „props” przez każdy zagnieżdżony komponent. Nazywa się to „wierceniem podporowym”.
Przykład:
Przekazywanie "rekwizytów" przez zagnieżdżone komponenty:
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"));
Mimo że komponenty 2-4 nie potrzebowały stanu, musiały go przekazać dalej, aby mógł osiągnąć komponent 5.
Zostać certyfikowanym!
95 $ ZAPISZ
Rozwiązanie
Rozwiązaniem jest stworzenie kontekstu.
Utwórz kontekst
Aby utworzyć kontekst, musisz createContextgo zaimportować i zainicjować:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Następnie użyjemy dostawcy kontekstu, aby zawinąć drzewo komponentów, które wymagają stanu Context.
Dostawca kontekstu
Zawijaj komponenty podrzędne w dostawcy kontekstu i podaj wartość stanu.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Teraz wszystkie komponenty w tym drzewie będą miały dostęp do kontekstu użytkownika.
Użyj useContexthaka
Aby użyć kontekstu w komponencie potomnym, musimy uzyskać do niego dostęp za pomocą useContexthooka.
Najpierw uwzględnij useContextw oświadczeniu importu:
import { useState, createContext, useContext } from "react";
Następnie możesz uzyskać dostęp do kontekstu użytkownika we wszystkich komponentach:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Pełny przykład
Przykład:
Oto pełny przykład użycia 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"));