Der Hook von React useContextist ein leistungsstarkes Tool zum Teilen des Status zwischen Komponenten, ohne dass Daten durch eine lange Kette von Requisiten geleitet werden müssen. Mit useContextkönnen Sie problemlos den Status im gesamten Komponentenbaum teilen, was es zu einem nützlichen Werkzeug für die Verwaltung des globalen Status macht.

In diesem Artikel untersuchen wir die Grundlagen des useContextHooks und sehen, wie wir ihn zum Verwalten des Status in unseren React-Anwendungen verwenden können.

Was ist useContext?

useContextist ein integrierter React-Hook, der es Ihnen ermöglicht, Daten aus einem Kontext zu nutzen, der von einer übergeordneten Komponente erstellt wurde. Ein Kontext ist ein Objekt, das einige gemeinsame Zustandsdaten enthält, auf die jede Komponente zugreifen kann, die ein Nachkomme der Komponente ist, die den Kontext erstellt hat.

Der useContextHook nimmt ein Kontextobjekt als Argument und gibt den aktuellen Wert dieses Kontexts zurück. Dies bedeutet, dass alle Aktualisierungen des Kontexts automatisch ein erneutes Rendern aller Komponenten auslösen, die ihn nutzen.

Wie benutzt man useContext?

Um es zu verwenden useContext, müssen wir zunächst ein Kontextobjekt erstellen. Wir können dies mit der createContextMethode aus der ReactBibliothek tun. Hier ist ein Beispiel:

import React from 'react';

const MyContext = React.createContext();

import React from 'react';

const MyContext = React.createContext();

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      <div>
        <h1>Count: {count}</h1>
        <Counter />
      </div>
    </MyContext.Provider>
  );
}

function Counter() {
  const { count, setCount } = React.useContext(MyContext);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

Die AppKomponente umschließt ihre untergeordneten Komponenten in der MyContext.ProviderKomponente und übergibt den aktuellen Wert des gemeinsam genutzten Status als valueRequisite. In diesem Fall ist der Wert ein Objekt, das den countZustand und die setCountFunktion enthält.

Die CounterKomponente konsumiert das MyContextObjekt mithilfe des useContextHooks und extrahiert den countStatus und die setCountFunktion aus dem Kontextobjekt. Anschließend verwenden wir die incrementFunktion, um den Freigabestatus zu aktualisieren, wenn auf die Schaltfläche geklickt wird.

Wann verwenden useContext?

useContextist am nützlichsten für die Verwaltung des globalen Status, auf den mehrere Komponenten in der gesamten Anwendung zugreifen müssen. Dies ist eine gute Wahl für Fälle, in denen das Bohren von Stützen umständlich wäre oder Sie vermeiden möchten, dass der Zustand durch mehrere Schichten von Komponenten geleitet wird.

useContextist auch eine gute Wahl für Fälle, in denen Sie Funktionen durch den Komponentenbaum weitergeben müssen. Indem Sie eine Funktion über das Kontextobjekt weiterleiten, können Sie vermeiden, dass sie über mehrere Komponentenebenen weitergegeben werden muss.

Abschluss

Der useContextHook ist ein leistungsstarkes Tool zur Verwaltung des globalen Status.

Ich hoffe, dass ich euch das alles erklären kann.