Reageren gebruikContext Hook
Reageercontext
React Context is een manier om de staat wereldwijd te beheren.
Het kan samen met de useStateHook worden gebruikt om de toestand tussen diep geneste componenten gemakkelijker te delen dan met useStatealleen.
Het probleem
Status moet worden gehouden door de hoogste bovenliggende component in de stapel die toegang tot de status vereist.
Ter illustratie: we hebben veel geneste componenten. Het onderdeel aan de boven- en onderkant van de stapel heeft toegang nodig tot de status.
Om dit zonder Context te doen, moeten we de status doorgeven als "rekwisieten" door elke geneste component. Dit wordt "propboren" genoemd.
Voorbeeld:
Het doorgeven van "rekwisieten" door geneste componenten:
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"));
Hoewel componenten 2-4 de status niet nodig hadden, moesten ze de status doorgeven zodat deze component 5 kon bereiken.
Gecertificeerd!
$95 INSCHRIJVEN
De oplossing
De oplossing is om context te creëren.
Creëer context
Om context te creëren, moet u deze importeren createContexten initialiseren:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Vervolgens zullen we de Context Provider gebruiken om de structuur van componenten die de status Context nodig hebben in te pakken.
Contextprovider
Wikkel onderliggende componenten in de contextprovider en geef de statuswaarde op.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Nu hebben alle componenten in deze boom toegang tot de gebruikerscontext.
Gebruik de useContexthaak
Om de Context in een onderliggende component te gebruiken, moeten we deze openen met behulp van de useContextHook.
Neem eerst het volgende useContextop in de importverklaring:
import { useState, createContext, useContext } from "react";
Vervolgens heeft u in alle componenten toegang tot de gebruikerscontext:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Volledig voorbeeld
Voorbeeld:
Hier is het volledige voorbeeld met 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"));