createContext()

Die Funktion createContext() ist der Ausgangspunkt für die Nutzung des React Context API. Mit ihr wird ein Context-Objekt erzeugt, das eine zentrale Schnittstelle für das Teilen von Daten zwischen Komponenten bietet, ohne dass Props manuell durch jede Komponente hindurchgereicht werden müssen. Dieses Context-Objekt umfasst einen Provider, der die Daten bereitstellt, und einen Consumer, der sie in tiefer verschachtelten Komponenten abruft. createContext() erlaubt es, einen Default-Wert festzulegen, der genutzt wird, falls kein übergeordneter Provider vorhanden ist, und bildet so die Basis für ein effizientes und flexibles globales State-Management innerhalb einer React-Anwendung.

Inhaltsverzeichnis

Grundlegende Syntax

Die createContext() Funktion ist der Startpunkt für die Verwendung von Context. Mit ihrer Hilfe wird das Context-Objekt erstellt.

const MyContext = createContext(defaultValue);

Parameter

Der Parameter defaultValue ist optional und wird verwendet, wenn eine Komponente versucht, den Context zu konsumieren, ohne dass ein passender Provider in der Hierarchie darüber existiert.

Rückgabewert

Die Funktion createContext() gibt ein Context-Objekt zurück, das diese zwei wichtigen Komponenten enthält.

MyContext.Provider: Eine Komponente, die den Context-Wert bereitstellt
MyContext.Consumer: Eine Komponente, die den Context-Wert konsumiert (veraltet zugunsten von useContext)

Beispiel - createContext()

In diesem Beispiel erstellen wir im ersten Part ein paar Context-Objekte mit unterschiedlichen Startwerten.

            CreateContextSimple.jsx
        
// React
import { createContext } from 'react';

// Ohne einen Startwert
const SimpleBlankContext = createContext();

// Mit einem String als Startwert
const SimpleStringContext = createContext('Simple string');

// Mit einer Zahl als Startwert
const SimpleNumberContext = createContext(42);

// Mit einem Objekt als Startwert
const SimpleObjectContext = createContext({
    name: 'John',
    isLoggedIn: false
});

// Mit einem Array als Startwert
const SimpleArrayContext = createContext([
    100,
    200,
    300
]);

const CreateContextSimple = () => {
    return <></>;
};

export default CreateContextSimple;

Wie wir bereits erfahren haben, wird der Standardwert nur verwendet, wenn kein passender Provider gefunden wurde. In diesem Beispiel haben wir keinen Provider im Einsatz.

Wir können die Startwerte in der Browser-Konsole ausgeben. Dazu können wir bequem die Eigenschaft _currentValue am Context-Objekt verwenden. Als Hilfselement fügen einen einen Button hinzu, mit dem wir die initiale Startwerte ausgeben können.

            CreateContextSimple.jsx
        
const CreateContextSimple = () => {
    const logInitialValues = () => {
        console.log(SimpleBlankContext._currentValue);
        console.log(SimpleStringContext._currentValue);
        console.log(SimpleNumberContext._currentValue);
        console.log(SimpleObjectContext._currentValue);
        console.log(SimpleArrayContext._currentValue);
    };

    return (
        <button onClick={logInitialValues}>Log values</button>
    );
};

export default CreateContextSimple;

Wie wir sehen, haben wir die entsprechenden Logs mit den übergebenen Werten als Ausgabe erhalten.

React Context - Beispiele mit initialen Werten als Log-Ausgabe

navigation Navigation