Kontext

Kontext in React ist eine leistungsstarke Funktion, die das Teilen von Daten zwischen Komponenten ermöglicht, ohne dass explizites Prop-Passing auf jeder Ebene des Komponentenbaums erforderlich ist. Mit Kontext können wir Daten in der Komponenten-Hierarchie weitergeben, sodass sie für jede Komponente leicht zugänglich sind, unabhängig von ihrer Position im Baum.

Hinweis

Um zu beginnen, lassen Sie uns in die Syntax eintauchen. Wir bieten eine Schritt-für-Schritt-Anleitung, um sicherzustellen, dass Sie jedes Konzept auf dem Weg verstehen. Die Anwendung von Kontext erfordert eine spezifische Code-Implementierung auf verschiedenen Komponentenebenen. Sobald wir die Syntax gründlich behandelt haben, werden wir in ein praktisches Beispiel eintauchen.

Syntax:

1. Schritt: Wir erstellen einen neuen Kontext mit der Funktion createContext() aus der React-Bibliothek und weisen ihn einer Variablen zu. Dies sollte auf der obersten Ebene der Anwendung geschehen. Typischerweise machen wir dies in einer separaten Datei (z.B. context.js). Diese wird für das Kontextobjekt verantwortlich sein.

context.js

2. Schritt: In der App-Datei umschließen wir alle Komponenten, die Zugriff auf die geteilten Daten benötigen, mit der Provider-Komponente aus dem erstellten Context. Die Provider-Komponente ermöglicht es uns, den Wert des Kontexts zu definieren und ihn allen untergeordneten Komponenten zur Verfügung zu stellen, die diesen Kontext konsumieren.

App.jsx

3. Schritt: In der App-Datei müssen wir auch die Kontextdaten bereitstellen. Dies erreichen wir, indem wir die value-Eigenschaft für die Context.Provider-Komponente verwenden. Wir weisen alle erforderlichen Daten der value-Eigenschaft zu.

App.jsx

4. Schritt: In den untergeordneten Komponenten (ChildCompOne oder ChildCompTwo) können wir auf die geteilten Daten mit dem useContext-Hook zugreifen. Um den useContext-Hook zu verwenden, müssen wir den erstellten Context aus der context.js-Datei als Argument übergeben.

ChildCompOne.jsx

Vollständiger App-Code:

Hinweis

Bitte nehmen Sie sich einen Moment Zeit, um jeden Schritt zu überprüfen, indem Sie jede Datei und jeden Ordner öffnen, um sicherzustellen, dass Sie den Prozess klar verstehen. Das nächste Kapitel wird mit einem Beispiel fortfahren, das Context und Hooks kombiniert. Dies ermöglicht es Ihnen, zu sehen, wie diese Konzepte in der Praxis zusammenarbeiten.