So verwenden Sie Kontext in React

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 oft in einer separaten Datei deklariert wird. Ich vergleiche „Parent.js“ jedoch mit einer typischen „App.js“-Datei (einer Komponente an der Spitze 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(
    <Context.Provider >
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

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(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        // Other JSX & the child components we want to hand Context to.

    </Context.Provider>
);

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(
    <Context.Provider value ={{ example, setExample, handleExample }}>
        <Child />
    <Components />
    <Go />
    <Here />
    </Context.Provider>
);

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, sind wir bereit, mit den untergeordneten Komponenten fortzufahren und zu sehen, wie „Context“ verwendet wird.

3. Let’s go onto a child component which (for the sake of this example) is housed in the file "Child.js". As life is with coding: if you want to use something, you need to import it. Let’s go ahead and get ‘Context’ from where we declared it in ‘Parent.js’ so we can use it in this child component (‘Child.js’):

import Context from ‘./Parent.js’;

4. Now that we have access to ‘Context’ in the child component, we now need to import 'useContext' into the file so we can pass 'Context' to it (more on that shortly):

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

5. Great! Now let’s use 'useContext'. First we need to declare a variable to use 'useContext' with. We’ll do this inside the component in a similar fashion to how we would declare useState:

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

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

    // The rest of our code

In this code we are using curly braces {} to denote destructuring assignment. That's a fancy way of saying we are able to call multiple variables and functions stored in Context. We are also passing ‘Context’ to 'useContext' so we can access the values defined in Context.Provider (which we declared in ‘Parent.js’).



6. Believe it or not, you are all set! You can now use the context values in your code just like you would normally use State. For example:

const expId = example.id;

or

setExample(newExample);

Let’s Recap:

Congratulations! You now have all the tools to get started with createContext and useContext. You understand that useContext allows you to create something of a ‘global state' that can pass variables and functions to components without passing props directly through child components.

We also delved into the six steps required to get context working in your applications. You are now ready to begin coding with createContext and useContext, but in case you ever need a quick-start guide, here you go:


In your parent component, declare and export a variable called 'Context' using 'createContext':

export const Context = React.createContext();

In the parent component’s JSX, wrap all child components that need access to context in Context.Proivder, and pass any variables/functions inside an object:

<Context.Provider value={{ example, setExample, handleExample }}>
   //Child components
</Context.Provider>

In you child component, import 'useContext':

import React, { useContext } from ‘react’;

Also import ‘Context’ from the parent component:

import Context from “./Parent.js’;

Then use useContext and pass it your ‘Context’ variable:

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

Finally, use the context you now have access to (in our examples above this would be 'example' and 'handleExample') however you need to in the child component.

Well done! And until next time, happy coding!

One last note, if you would like to delve deeper into this subject, here are the official documentation resources I also referenced while learning useContext and writing this blog:


Official Documentation:
https://react.dev/reference/react/createContext


Legacy Official Documentation, still somewhat helpful for understanding useContext:
https://legacy.reactjs.org/docs/context.html

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Kontext in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!