Reagieren Sie mit useContext Hook
Kontext reagieren
React Context ist eine Möglichkeit, den Status global zu verwalten.
Es kann zusammen mit dem useStateHook verwendet werden, um den Zustand zwischen tief verschachtelten Komponenten einfacher als useStateallein zu teilen.
Das Problem
Der Zustand sollte von der höchsten übergeordneten Komponente im Stapel gehalten werden, die Zugriff auf den Zustand benötigt.
Zur Veranschaulichung haben wir viele verschachtelte Komponenten. Die Komponente am oberen und unteren Ende des Stapels benötigt Zugriff auf den Zustand.
Um dies ohne Kontext zu tun, müssen wir den Zustand als "Props" durch jede verschachtelte Komponente übergeben. Dies wird als "Stützenbohren" bezeichnet.
Beispiel:
Übergeben von "Requisiten" durch verschachtelte Komponenten:
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"));
Obwohl die Komponenten 2-4 den Zustand nicht benötigten, mussten sie den Zustand weitergeben, damit er die Komponente 5 erreichen konnte.
Zertifiziert werden!
$ 95 REGISTRIEREN
Die Lösung
Die Lösung besteht darin, Kontext zu schaffen.
Kontext schaffen
Um Kontext zu erstellen, müssen Sie createContextihn importieren und initialisieren:
import { useState, createContext } from "react";
import ReactDOM from "react-dom";
const UserContext = createContext()
Als Nächstes verwenden wir den Kontextanbieter, um den Baum der Komponenten zu umschließen, die den Zustandskontext benötigen.
Kontextanbieter
Untergeordnete Komponenten in den Kontextanbieter einschließen und den Statuswert bereitstellen.
function Component1() {
const [user, setUser] = useState("Jesse Hall");
return (
<UserContext.Provider value={user}>
<h1>{`Hello ${user}!`}</h1>
<Component2 user={user} />
</UserContext.Provider>
);
}Jetzt haben alle Komponenten in diesem Baum Zugriff auf den Benutzerkontext.
Benutze den useContextHaken
Um den Kontext in einer untergeordneten Komponente zu verwenden, müssen wir mit dem useContextHook darauf zugreifen.
Fügen Sie zunächst Folgendes useContextin die Importanweisung ein:
import { useState, createContext, useContext } from "react";
Dann können Sie in allen Komponenten auf den Benutzerkontext zugreifen:
function Component5() {
const user = useContext(UserContext);
return (
<>
<h1>Component 5</h1>
<h2>{`Hello ${user} again!`}</h2>
</>
);
}
Vollständiges Beispiel
Beispiel:
Hier ist das vollständige Beispiel mit 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"));