ReactJS - Kontext: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte Entwickler! Heute tauchen wir in die wunderbare Welt von ReactJS Kontext ein. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich mit der gleichen Begeisterung durch dieses Konzept zu führen, die ich hatte, als ich es das erste Mal gelernt habe. Also hol dir dein Lieblingsgetränk, mach dich gemütlich, und lasst uns gemeinsam diese aufregende Reise antreten!

Was ist Kontext in React?

Stell dir vor, du bist auf einer Familientreffen und möchtest eine lustige Geschichte mit allen teilen. Wär es nicht großartig, wenn du sie einfach einmal ansagen könntest und alle sie hören könnten? Genau das macht der Kontext in React!

Kontext bietet eine Möglichkeit, Daten durch den Komponentenbaum zu übergeben, ohne sie manuell auf jeder Ebene als Props weiterzugeben. Er ist darauf ausgelegt, Daten zu teilen, die für einen Baum von React-Komponenten als "global" angesehen werden können.

Wann sollte man Kontext verwenden?

Bevor wir tiefer einsteigen, lassen wir uns verstehen, wann man Kontext verwenden sollte:

1. Wenn du Daten hast, die von vielen Komponenten auf verschiedenen Ebenen zugänglich sein müssen.
2. Wenn du das "Prop-Bohren" vermeiden möchtest (das Weiterreichen von Props durch mittlere Komponenten, die die Daten nicht benötigen).

Erstellen und Verwenden von Kontext

Lassen wir uns durch den Prozess des Erstellens und Verwendens von Kontext mit einigen Codebeispielen führen.

Schritt 1: Erstellen eines Kontextes

Zuerst müssen wir einen Kontext erstellen. Dafür verwenden wir die Methode React.createContext().

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

In diesem Beispiel haben wir einen ThemeContext mit dem Standardwert 'light' erstellt. Dieser Standardwert wird verwendet, wenn eine Komponente oben im Baum keinen passenden Provider hat.

Schritt 2: Bereitstellen des Kontextes

Nun haben wir unseren Kontext und müssen ihn unserem Komponentenbaum bereitstellen. Dafür verwenden wir das Context.Provider-Komponente.

import React from 'react';
import ThemeContext from './ThemeContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<Toolbar />
</ThemeContext.Provider>
);
}

function Toolbar() {
return (
<div>
<ThemedButton />
</div>
);
}

In diesem Beispiel umgeben wir unsere Toolbar-Komponente (und alle ihre Kinder) mit dem ThemeContext.Provider. Wir setzen den Wert auf "dark", der allen Komponenten innerhalb dieses Providers zur Verfügung steht.

Schritt 3: Verwenden des Kontextes

Nun kommen wir zum spannenden Teil - die Verwendung unseres Kontextes! Es gibt zwei Möglichkeiten, Kontext zu verwenden:

1. Class.contextType
2. Context.Consumer

Lassen wir uns beide ansehen:

Verwenden von Class.contextType

import React from 'react';
import ThemeContext from './ThemeContext';

class ThemedButton extends React.Component {
static contextType = ThemeContext;
render() {
return <button theme={this.context}>Ich bin ein thematischer Knopf!</button>;
}
}

In diesem Beispiel ist ThemedButton eine Klassenkomponente. Wir haben seinen contextType auf unseren ThemeContext gesetzt. Jetzt gibt this.context uns Zugang zum aktuellen Kontextwert.

Verwenden von Context.Consumer

import React from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{value => <button theme={value}>Ich bin ein thematischer Knopf!</button>}
</ThemeContext.Consumer>
);
}

Hier verwenden wir das Context.Consumer-Komponente. Es verwendet eine Render-Prop, um den aktuellen Kontextwert an eine Funktion zu übergeben.

Mehrere Kontexte

Manchmal musst du möglicherweise mehrere Kontexte verwenden. React ermöglicht es dir, mehrere Context-Provider zu verschachteln:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function App() {
return (
<ThemeContext.Provider value="dark">
<UserContext.Provider value="John Doe">
<Toolbar />
</UserContext.Provider>
</ThemeContext.Provider>
);
}

Und du kannst mehrere Kontexte wie folgt verwenden:

import React from 'react';
import ThemeContext from './ThemeContext';
import UserContext from './UserContext';

function ThemedButton() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<button theme={theme}>
{user} verwendet {theme}-Thema
</button>
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

Aktualisieren des Kontextes

Kontext kann auch dynamisch sein. Sehen wir uns ein Beispiel an, in dem wir unser Thema aktualisieren:

import React, { useState } from 'react';
import ThemeContext from './ThemeContext';

function App() {
const [theme, setTheme] = useState('light');

return (
<ThemeContext.Provider value={{ theme, setTheme }}>
<Toolbar />
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Thema umschalten
</button>
</ThemeContext.Provider>
);
}

In diesem Beispiel verwenden wir den useState-Hook, um unseren Thema-Zustand zu verwalten. Wir übergeben sowohl den aktuellen Thema als auch die setTheme-Funktion in unserem Kontextwert.

Kontextmethoden

Hier ist eine Tabelle, die die Hauptmethoden des Kontextes zusammenfasst, die wir behandelt haben:

Methode	Beschreibung
React.createContext()	Erstellt ein Kontextobjekt
Context.Provider	Stellt einen Kontextwert für Komponenten bereit
Class.contextType	Ermöglicht Klassenkomponenten, einen einzigen Kontext zu verwenden
Context.Consumer	Ermöglicht Funktionkomponenten, sich an einen Kontext anzumelden

Fazit

Und das war's, Leute! Wir haben die Welt des React-Kontextes durchquert, von seiner Erstellung bis zu seiner Verwendung und Aktualisierung. Kontext ist ein mächtiges Werkzeug in React, das dir hilft, das Prop-Bohren zu vermeiden und globale Zustände effizient zu verwalten.

Denke daran, dass Kontext nicht immer die richtige Lösung ist. Für einfachere Fälle könnten Props immer noch deine beste Wahl sein. Aber wenn du Daten über viele Komponenten auf verschiedenen Ebenen teilen musst, kann Kontext dein neuer bester Freund sein.

Weiter üben, weiter codieren und vor allem: weiter Spaß haben! Bis zum nächsten Mal, frohes Reacten!

Credits: Image by storyset