Kontext in React

Bevor wir zum nächsten Hook übergehen, müssen wir das Konzept des Kontexts in React betrachten.

Normalerweise haben wir Daten von übergeordneten Komponenten an untergeordnete Komponenten über Props übermittelt. Diese Methode ist gut, wenn Sie nicht viele Komponenten haben und die Props nicht über mehr als 2-3 Ebenen von untergeordneten Komponenten von der übergeordneten zur gewünschten Komponente weitergereicht werden müssen.

Diese Methode kann auch extrem umständlich werden und zu verschiedenen Problemen führen, wenn die Props in den Zwischenkomponenten überhaupt nicht verwendet werden (ein solches Problem wird Prop Drilling genannt), oder Sie dieselben Daten an eine große Anzahl von Komponenten übergeben müssen.

In diesen Fällen kann uns der Kontext helfen, der es ermöglicht, Daten der übergeordneten Komponente für jede untergeordnete Komponente zugänglich zu machen, unabhängig von ihrer Position im Komponentenbaum, ohne sie über Props zu übergeben. Dementsprechend werden die Daten nur von den Komponenten empfangen, die sie benötigen.

Um den Kontext nutzen zu können, muss er erstellt werden. Zuerst erstellen wir die Datei MyContext.js und importieren die Funktion createContext:

import { createContext } from 'react';

Jetzt erstellen wir das Kontextobjekt, speichern es in der Variable MyContext, die wir nicht zu exportieren vergessen. In unserem Fall haben wir für createContext den Anfangswert null gesetzt, da er für uns nicht entscheidend ist (man hätte auch einfach leere Klammern lassen können). Der festgelegte Standardwert erscheint beim Lesen des Kontexts, wenn keine anderen Werte gefunden werden. Dieser Wert kann jeden Typ haben:

export const MyContext = createContext(null);

In der nächsten Lektion werden wir eine Anwendung aus mehreren Komponenten erstellen, die in separaten Dateien liegen. Wenn alle Komponenten in einer Datei wären, dann würden wir für die Erstellung des Kontexts auch keine separate Datei anlegen und ihn nicht exportieren.

Importieren wir nun MyContext.js in die leere Komponente App - in die Komponente, von der aus wir Daten übermitteln möchten:

import { MyContext } from './MyContext.js';

Erstellen Sie die Datei MyContext.js und importieren Sie sie in die leere Komponente App, wie in der Lektion beschrieben.