Willkommen zurück, Freunde!


Heute gehen wir die Grundlagen eines React Hook namens useContext durch. useContext ist ein leistungsstarkes Tool, das über useState hinausgeht und einen globalen Status erstellt, der Informationen an untergeordnete und untergeordnete Komponenten weitergeben kann, ohne Requisiten direkt weiterzugeben.

Aber ich bin mir selbst voraus.
Wenn Sie mit useState nicht vertraut sind, lesen Sie zuerst meinen vorherigen Artikel und kommen Sie dann zurück und lassen Sie sich überraschen!


So verwenden Sie „useState“: https://dev.to/deborah/how-to-use-state-in-react-2pah

Da Sie nun mit „useState“ vertraut sind, tauchen wir ein in „useContext“!

Was ist useContext?:

useContext ist ideal für Daten, die in einem globalen Bereich platziert werden müssen (z. B. ein Benutzername, der dafür sorgt, dass jemand während der gesamten Anwendung angemeldet bleibt), aber es ist nicht die ultimative Abkürzung dazu Weitergabe von Requisiten an untergeordnete Komponenten.
UseContext ermöglicht uns jedoch die Übergabe von Daten, ohne Requisiten direkt zu übergeben, und ist daher äußerst hilfreich, wenn wir auf Daten stoßen, auf die mehrere untergeordnete Komponenten zugreifen oder die in der gesamten Anwendung verfügbar gemacht werden müssen.

Um useContext zum Laufen zu bringen, müssen wir zwei Schritte unternehmen: Zuerst müssen wir ein Kontextobjekt erstellen („createContext“), dann müssen wir über einen Anbieter mit dem Hook „useContext“ auf den Wert zugreifen. .

Die folgenden Beispiele wurden vereinfacht, um Ihnen eine bessere Vorstellung davon zu geben, worum es bei useContext geht und wie man es verwendet. Sie sollten sich jedoch darüber im Klaren sein, dass createContext häufig in einer separaten Datei deklariert wird. Ich vergleiche „Parent.js“ jedoch mit einer typischen „App.js“-Datei (einer Komponente oben in der Komponentenhierarchie). In Parent.js habe ich alle meine Statusvariablen und die Funktionen, die diese Statusvariablen aktualisieren, definiert und mit useEffect Abrufe in die Datenbank durchgeführt. Ich habe mich dafür entschieden, createContext in meiner Komponente der obersten Ebene zu deklarieren, anstatt eine eigene Datei zu erstellen, um diese Erklärung zu vereinfachen, damit Sie die Kernkonzepte von Context besser verstehen können.

Nach alledem fangen wir ganz am Anfang an: createContext!

1. Als erstes müssen wir eine Variable namens „Context“ deklarieren und exportieren, die wir später in unseren untergeordneten Komponenten verwenden werden [wir erstellen jetzt eine Variable, um unseren Code einfacher zu gestalten und ihn platzieren zu können ein darin enthaltener Wert (Daten), auf den später zugegriffen werden kann]:

export Context = React.createContext();

„Context“ ist ein Kontextobjekt, das durch den Aufruf von „createContext“ erstellt wird. Das Kontextobjekt enthält eine Komponente namens Provider, die wir nun aufrufen und dann die Variablen und Funktionen übergeben können, die wir auf unserer „globalen“ Ebene behalten möchten.

2. Lassen Sie uns nun mit unserer Variable „Context“ zu unserem JSX in der Return-Anweisung springen. Hier rufen wir „Context“ auf und schließen es in öffnende Tags (spitze Klammern) ein. Außerdem rufen wir Provider wie folgt auf:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Um „Context.Provider“ zu vervollständigen, müssen wir auch einen Wert für „Provider“ bereitstellen. Hier übergeben wir ein Objekt mit allen Variablen und Funktionen, die wir mit „Context“ in den untergeordneten Komponenten aufrufen:

return(
    
        // Other JSX & the child components we want to hand Context to.

    
);

Es ist SEHR WICHTIG zu beachten, dass wir ALLE untergeordneten Komponenten, die die Variablen und Funktionen verwenden, zwischen den Tags platzieren müssen. Zum Beispiel:

return(
    
);

Beachten Sie, dass wir keine Requisiten direkt an die untergeordneten Komponenten übergeben müssen (wie wir es mit „useState“ tun würden), solange wir die Requisiten in „value“ einfügen.

Da wir nun „createContext“ verwendet und alle unsere globalen Elemente an „Context.Provider“ übergeben haben, können wir mit den untergeordneten Komponenten fortfahren und sehen, wie „Context“ verwendet wird.

3. Gehen wir zu einer untergeordneten Komponente über, die (für dieses Beispiel) in der Datei „Child.js“ untergebracht ist. Wie das Leben beim Codieren ist: Wenn Sie etwas verwenden möchten, müssen Sie es importieren. Lassen Sie uns fortfahren und „Context“ von der Stelle abrufen, an der wir ihn in „Parent.js“ deklariert haben, damit wir ihn in dieser untergeordneten Komponente („Child.js“) verwenden können:

import Context from ‘./Parent.js’;

4. Da wir nun Zugriff auf „Context“ in der untergeordneten Komponente haben, müssen wir nun „useContext“ in die Datei importieren, damit wir ihr „Context“ übergeben können (mehr dazu in Kürze):

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

5. Großartig! Jetzt verwenden wir „useContext“. Zuerst müssen wir eine Variable deklarieren, mit der „useContext“ verwendet werden soll. Wir werden dies innerhalb der Komponente auf ähnliche Weise tun, wie wir useState deklarieren würden:

import React, { useContext } from ‘react’;
import Context from ‘./Parent.js’;

function Child(){
    const { example, setExample } = useContext(Context)

    // The rest of our code

In diesem Code verwenden wir geschweifte Klammern {}, um eine Destrukturierungszuweisung zu kennzeichnen. Das ist eine schicke Art zu sagen, dass wir mehrere im Kontext gespeicherte Variablen und Funktionen aufrufen können. Wir übergeben „Context“ auch an „useContext“, damit wir auf die in Context.Provider definierten Werte zugreifen können (die wir in „Parent.js“ deklariert haben).



6. Ob Sie es glauben oder nicht, Sie sind bereit! Sie können die Kontextwerte jetzt in Ihrem Code genauso verwenden, wie Sie es normalerweise mit State tun würden. Zum Beispiel:

const expId = example.id;

oder

setExample(newExample);

Fassen wir noch einmal zusammen:

Glückwunsch! Sie verfügen jetzt über alle Tools, um mit createContext und useContext zu beginnen. Sie verstehen, dass Sie mit useContext so etwas wie einen „globalen Zustand“ erstellen können, der Variablen und Funktionen an Komponenten übergeben kann, ohne Requisiten direkt über untergeordnete Komponenten zu übergeben.

Wir haben uns auch mit den sechs Schritten befasst, die erforderlich sind, damit der Kontext in Ihren Anwendungen funktioniert. Sie können jetzt mit dem Codieren mit createContext und useContext beginnen, aber falls Sie jemals eine Kurzanleitung benötigen, hier:

Deklarieren und exportieren Sie in Ihrer übergeordneten Komponente eine Variable namens „Context“ mit „createContext“:

export const Context = React.createContext();

Schließen Sie im JSX der übergeordneten Komponente alle untergeordneten Komponenten, die Zugriff auf den Kontext benötigen, in Context.Proivder ein und übergeben Sie alle Variablen/Funktionen innerhalb eines Objekts:

   //Child components

Importieren Sie „useContext“ in Ihre untergeordnete Komponente:

import React, { useContext } from ‘react’;

Importieren Sie auch „Kontext“ aus der übergeordneten Komponente:

import Context from “./Parent.js’;

Verwenden Sie dann useContext und übergeben Sie ihm Ihre „Context“-Variable:

const { example, handleExample } = useContext(Context);

Verwenden Sie abschließend den Kontext, auf den Sie jetzt Zugriff haben (in unseren obigen Beispielen wäre dies „example“ und „handleExample“), wie auch immer Sie es in der untergeordneten Komponente benötigen.

Gut gemacht! Und bis zum nächsten Mal viel Spaß beim Codieren!

Eine letzte Anmerkung: Wenn Sie tiefer in dieses Thema eintauchen möchten, finden Sie hier die offiziellen Dokumentationsressourcen, auf die ich beim Erlernen von useContext und beim Schreiben dieses Blogs auch verwiesen habe:

Offizielle Dokumentation:
https://react.dev/reference/react/createContext

Offizielle Legacy-Dokumentation, immer noch einigermaßen hilfreich für das Verständnis von useContext:https://legacy.reactjs.org/docs/context.html