Reagovat useContext Hook
Reagovat Kontext
React Context je způsob, jak řídit stav globálně.
Lze jej použít společně s useStateHookem ke sdílení stavu mezi hluboce vnořenými komponentami snadněji než useStatesamostatně.
Problém
Stav by měl držet nejvyšší nadřazený komponent v zásobníku, který vyžaduje přístup ke stavu.
Pro ilustraci máme mnoho vnořených komponent. Komponenta v horní a dolní části zásobníku potřebuje přístup ke stavu.
Abychom to provedli bez kontextu, budeme muset předat stav jako "rekvizity" přes každou vnořenou komponentu. Toto se nazývá „vrtání vrtulí“.
Příklad:
Předávání „rekvizit“ prostřednictvím vnořených komponent:
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"));
I když komponenty 2-4 nepotřebovaly stav, musely předat stav, aby se dostal ke komponentě 5.
Získejte certifikaci!
95 $ PŘIHLÁSIT SE
Řešení
Řešením je vytvořit kontext.
Vytvořit kontext
Chcete-li vytvořit kontext, musíte createContextjej importovat a inicializovat:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Dále použijeme Context Provider k zabalení stromu komponent, které potřebují stav Context.
Poskytovatel kontextu
Zabalte podřízené komponenty do poskytovatele kontextu a zadejte hodnotu stavu.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Nyní budou mít všechny komponenty v tomto stromu přístup k uživatelskému kontextu.
Použijte useContextháček
Abychom mohli použít kontext v podřízené komponentě, musíme k němu přistupovat pomocí useContextháku.
Nejprve zahrňte useContextdo příkazu import:
import { useState, createContext, useContext } from "react";
Poté můžete přistupovat k uživatelskému kontextu ve všech komponentách:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Úplný příklad
Příklad:
Zde je úplný příklad použití 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"));