Context API ist eine (ziemlich) neue Funktion, die in Version 16.3 von React hinzugefügt wurde und die es ermöglicht, den Status der gesamten App (oder eines Teils davon) einfach und unkompliziert zu teilen. Sehen wir uns an, wie man sie verwendet.
React Context API: In diesem Artikel erfahren Sie, was Context API ist und wie Sie es in Ihrem React-Projekt verwenden. Context API ist eine React-Struktur, die Ihnen den Austausch eindeutiger Details ermöglicht und Sie bei der Lösung von Prop-Drilling auf allen Ebenen Ihrer Anwendung unterstützt.
Was ist Context API?
Die React Context API ist eine Möglichkeit für eine React-App, effektiv globale Variablen zu erstellen, die weitergegeben werden können. Dies ist die Alternative zum „Prop Drilling“ oder zum Verschieben von Props vom Großeltern- zum Kind- zum Eltern-Element usw. Context wird auch als einfacherer, leichterer Ansatz für die Statusverwaltung mit Redux angepriesen.
Context API ist eine (ziemlich) neue Funktion, die in Version 16.3 von React hinzugefügt wurde und die es ermöglicht, den Status der gesamten App (oder Teilen davon) einfach und unkompliziert zu teilen.
React Context API: Wie funktioniert es?
React.createContext() ist alles, was Sie brauchen. Es gibt einen Consumer und einen Provider zurück. Provider ist eine Komponente, die, wie der Name schon sagt, den Status an ihre untergeordneten Komponenten weitergibt. Sie enthält den „Store“ und ist die übergeordnete Komponente aller Komponenten, die diesen Store benötigen könnten. Consumer ist eine Komponente, die den Status konsumiert und verwendet. Weitere Informationen finden Sie auf der Dokumentationsseite von React.
Wird die Context-API Redux ersetzen?
Nein, also nicht ganz.
Redux ist großartig und hat den Bedarf an Zustandsverwaltung perfekt gedeckt. Tatsächlich hat es diesen Bedarf so gut gedeckt, dass man sich darüber im Klaren wurde, dass man kein „echter“ React-Entwickler sein kann, wenn man sich mit Redux nicht auskennt. Redux hat jedoch seine Nachteile, und deshalb ist es wichtig zu wissen, was uns Context API bietet, was Redux nicht bietet:
- Einfachheit – Bei der Verwendung von Redux neigen die Benutzer dazu, fast ihren gesamten Status in Redux zu verwalten, und dies verursacht zwei Probleme:
- Overhead – Warum sollte ich 3 Dateien erstellen/aktualisieren, nur um eine winzige Funktion hinzuzufügen?
- Einer der wesentlichen Vorteile der unidirektionalen Datenbindung von React ist ihre einfache Verständlichkeit: Eine Komponente übergibt ihren Status an ihre untergeordneten Komponenten. Durch die Verwendung von Redux wird uns dies abgenommen.
- Mithilfe der Context-API können wir mehrere unabhängige Kontexte (Stores) definieren und jeden an der richtigen Stelle in der App verwenden.
Wichtiger Hinweis
Redux ist nur ein Konzept. Wenn Sie mit der Verwendung von Reducern und Aktionen vertraut sind und keine Hindernisse darin sehen, können Sie auch Reducer und Aktionen erstellen, die die Context API als Store umschließen, wie Redux-Autor Dan Abramov in seinem Medium-Artikel darüber erklärt, ob Redux immer erforderlich ist.
Wie verwende ich die Context-API?
Sie denken sich vielleicht: „Na ja, ich bin überzeugt. Wie implementiere ich Context API in meiner App?“ Stellen Sie zunächst sicher, dass Sie es brauchen. Manchmal verwenden Leute einen gemeinsamen Status über verschachtelte Komponenten hinweg, anstatt ihn einfach als Props zu übergeben. Und wenn Sie ihn brauchen, sollten Sie diese wenigen Schritte befolgen:
- Erstellen Sie unter Ihrem App-Stammverzeichnis einen Ordner mit dem Namen „contexts“ (nicht erforderlich, nur eine Konvention).
- Erstellen Sie eine Datei mit dem Namen <Ihr Kontextname>Context.js, z. B. userContext.js
- importieren und einen Kontext wie folgt erstellen:
- Erstellen Sie eine Komponente, die den Anbieter mit dem Namen umschließtProvider, zB UserProvider.
Beispiel mit React Hooks: - Erstellen Sie eine Komponente höherer Ordnung, um den Kontext mit dem Namen zu nutzen: mitzB withUser
Beispiel mit React Hooks:
Der Unterschied zwischen den beiden oben genannten Optionen besteht darin, dass Sie den Kontext in seine Eigenschaften aufteilen müssen, wenn Sie möchten, dass er eine einzelne verschachtelte Eigenschaft mit diesem Namen ist (was meiner Meinung nach praktischer ist).
- Exportieren Sie sie schließlich
- Und verwenden Sie sie, wie Sie möchten.
Zum Beispiel:
Sie werden auch feststellen, dass ich die neue Funktion „ Hooks “ verwendet habe, die seit Version 16.8 mit React ausgeliefert wird, um das Erstellen von Kontexten noch übersichtlicher und einfacher zu gestalten.
Mehr lesen: So implementieren Sie die Facebook Login
Letzter Ratschlag
Ich habe erwähnt, dass Leute Redux übermäßig verwenden, und das gilt auch für Context API. Verwenden Sie es nur, wenn Sie den Status zwischen vielen Komponenten mit vielen Verschachtelungen teilen müssen. Meistens sind die Daten, die Sie in einer Komponente haben, nur für ihre untergeordneten Komponenten relevant, daher ist es aussagekräftiger und angenehmer, sie in Props zu übergeben.
