Den useContext Hook von React beherrschen: Eine einfache Anleitung zur Shared State Management

Context-Hook in React verwenden

Der useContext-Hook ist ein integrierter React-Hook, mit dem Sie direkt auf den Wert eines Context zugreifen können, ohne den Context.Consumer Komponente. Es vereinfacht den Zugriff auf globale oder gemeinsam genutzte Daten in einer React-Anwendung, wie z. B. Benutzerauthentifizierung, Designeinstellungen oder Spracheinstellungen, ohne Requisiten manuell durch jede Ebene des Komponentenbaums weiterzugeben.

---

Was ist Kontext in React?

Bevor Sie sich mit useContext befassen, ist es wichtig, den

Kontext zu verstehen. In React bietet Context eine Möglichkeit, Werte wie Konfiguration oder Status im gesamten Komponentenbaum zu teilen, ohne Requisiten auf jeder Ebene manuell übergeben zu müssen.

• Context.Provider wird verwendet, um einen Teil des Komponentenbaums zu umschließen und allen Komponenten in diesem Baum einen Wert bereitzustellen.
• useContext ermöglicht einer Komponente, den von einem Context.Provider bereitgestellten Wert zu konsumieren.

---

Syntax von useContext

Der

useContext-Hook akzeptiert ein einzelnes Argument: das Context-Objekt und gibt den aktuellen Kontextwert zurück.

const contextValue = useContext(MyContext);

• MyContext: Dies ist das Kontextobjekt, das Sie mit React.createContext() erstellt haben.

• contextValue: Dies ist der Wert, den der Kontext bereitstellt. Es kann alles sein: ein Objekt, eine Zeichenfolge, eine Zahl usw.

---

So funktioniert useContext

1. Kontext erstellen: Sie erstellen zunächst einen Context mit React.createContext(). Dieser Kontext enthält den Standardwert.

   const MyContext = React.createContext('default value');

1. Kontext angeben: Die Context.Provider-Komponente wird verwendet, um Komponenten innerhalb ihres Baums einen Wert bereitzustellen. Jede Komponente in diesem Baum kann über useContext auf den Kontextwert zugreifen.

   const App = () => {
     const user = { name: 'John Doe', age: 30 };

     return (
       <MyContext.Provider value={user}>
         <ComponentA />
       </MyContext.Provider>
     );
   };

1. Kontext konsumieren: Verwenden Sie innerhalb einer untergeordneten Komponente useContext, um über den Kontext auf den Wert zuzugreifen.

   const ComponentA = () => {
     const user = useContext(MyContext); // Access the context value

     return (
       <div>
         <p>{user.name}</p>
         <p>{user.age}</p>
       </div>
     );
   };

In diesem Beispiel kann ComponentA auf das Benutzerobjekt (bereitgestellt von MyContext.Provider) zugreifen, ohne es explizit über Requisiten zu empfangen.

---

Beispiel: Verwendung von useContext für den Themenwechsel

Hier ist ein Beispiel, in dem wir useContext für eine einfache Funktionalität zum Wechseln des Themas verwenden.

Schritt 1: Erstellen Sie einen Kontext

const contextValue = useContext(MyContext);

Schritt 2: Kontext bereitstellen

Umschließen Sie Ihre App mit ThemeContext.Provider, um einen Wert (aktuelles Thema) bereitzustellen.

   const MyContext = React.createContext('default value');

Schritt 3: Kontext nutzen

In ComponentA können Sie mit useContext auf das aktuelle Thema zugreifen.

const ComponentA = () => {
  const theme = useContext(ThemeContext); // Auf aktuelles Theme zugreifen

  zurückkehren (
    <div>



<ul>
<li>
<strong>Erklärung:</strong>

<ul>
<li>
Die App stellt den Theme-Kontextwert („hell“ oder „dunkel“) bereit.</li>
<li>
KomponenteA verwendet useContext, um das aktuelle Thema zu nutzen und seinen Stil entsprechend zu ändern.</li>
</ul>


</li>

</ul>


<hr>

<h3>
  
  
  <strong>Mehrere Kontexte in einer Komponente</strong>
</h3>

<p>Sie können mehrere Kontexte in einer einzigen Komponente nutzen. Verwenden Sie beispielsweise sowohl ThemeContext als auch UserContext:<br>
</p>

<pre class="brush:php;toolbar:false">const UserContext = createContext({ name: 'Alice' });
const ThemeContext = createContext('light');

const App = () => {
  zurückkehren (
    <ThemeContext.Provider value="dark">
      <UserContext.Provider value={{ name: 'Bob' }}>
        <Komponente />
      </UserContext.Provider>
    </ThemeContext.Provider>
  );
};

const Component = () => {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);

  zurückkehren (
    <div>




<hr>

<h3>
  
  
  <strong>Wann sollte useContext verwendet werden?</strong>
</h3>

<p>Der <strong>useContext</strong>-Hook ist am nützlichsten, wenn:</p>

<ol>
<li>
<strong>Vermeidung des Bohrens von Stützen:</strong> Das Durchführen von Stützen tief durch viele Komponentenschichten kann mühsam werden. Mithilfe des Kontexts können Sie dies vermeiden und zulassen, dass Komponenten auf jeder Ebene des Baums gemeinsame Werte nutzen.</li>
<li>
<strong>Globale Statusverwaltung:</strong> Wenn Sie benötigen, dass der globale Status (wie Thema, Authentifizierung, Benutzereinstellungen) für viele Komponenten in verschiedenen Teilen der App zugänglich sein soll.</li>
<li>
<strong>Daten über Komponenten hinweg teilen:</strong> Wenn gemeinsame Daten (z. B. Benutzerinformationen, Einstellungen, Konfiguration) über mehrere Komponenten hinweg geteilt werden müssen, bietet useContext eine saubere Lösung.</li>
</ol>


<hr>

<h3>
  
  
  <strong>Leistungsaspekte</strong>
</h3>

<p>Obwohl <strong>useContext</strong> leistungsstark ist, kann es zu erneuten Renderings führen, wenn sich der Kontextwert ändert. Jedes Mal, wenn der Kontextwert aktualisiert wird, werden alle Komponenten, die diesen Kontext nutzen, neu gerendert. Um dies zu optimieren:</p>

• Kontextwerte auswendig lernen: Stellen Sie sicher, dass sich der Kontextwert selbst nicht unnötig ändert.
• Kontextanbieter aufteilen: Wenn Ihre App über mehrere gemeinsam genutzte Daten verfügt, teilen Sie diese in verschiedene Kontexte auf, um unnötige erneute Renderings zu minimieren.

---

Zusammenfassung des useContext Hook

• useContext ermöglicht es Ihnen, Kontextwerte direkt in Funktionskomponenten zu konsumieren.
• Sie erstellen einen Context mit React.createContext() und verwenden useContext, um auf den Kontextwert in jeder Komponente zuzugreifen, die vom Context.Provider.
Nützlich, um das Bohren von Requisiten zu vermeiden und Daten über mehrere Komponenten hinweg zu teilen, ohne Requisiten manuell weiterzugeben.
Die Optimierung der Leistung des Kontextkonsums erfordert eine sorgfältige Verwaltung der Kontextwerte und des Auswendiglernens.

---

Fazit

Der Hook

useContext ist ein wesentliches Tool zum Verwalten des gemeinsamen Status in React-Anwendungen. Es vereinfacht den Prozess der Nutzung von Kontextwerten und hilft, unnötiges Prop Drilling zu vermeiden, wodurch Ihr React-Code besser lesbar und wartbar wird. Durch die Nutzung von useContext können Sie flexiblere und skalierbarere Anwendungen mit gemeinsamem Status erstellen, auf die jede Komponente im Baum problemlos zugreifen kann.

---

Das obige ist der detaillierte Inhalt vonDen useContext Hook von React beherrschen: Eine einfache Anleitung zur Shared State Management. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!