ReactJS - Verwenden von useContext: Ein Anfängerleitfaden

Hallo da draußen, ambitionierte React-Entwickler! Heute tauchen wir in eine der kraftvollsten Funktionen von React ein: den useContext-Hook. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich hier, um dich Schritt für Schritt durch dieses Konzept zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen bei den Grundlagen und arbeiten uns hoch!

Was ist Kontext in React?

Bevor wir uns useContext zuwenden, lassen Sie uns verstehen, was Kontext in React ist. Stell dir vor, du organisierst ein großes Familientreffen. Du hast eine besondere Soße, die rumgereicht werden muss. Anstatt sie von Person zu Person zu reichen (was wie das Prop-Bohren in React ist), wäre es nicht einfacher, sie in die Mitte des Tisches zu stellen, wo alle drankommen können? Genau das macht der Kontext in React – er bietet eine Möglichkeit, Daten durch den Komponentenbaum zu übertragen, ohne sie manuell auf jeder Ebene als Props weiterzugeben.

Understanding useContext

Nun, useContext ist ein Hook, der es uns ermöglicht, diesen Kontext in unseren funktionalen Komponenten einfach zu konsumieren. Es ist, als würde jedem am Esstisch die direkte Möglichkeit gegeben, diese besondere Soße zu erreichen, ohne dass andere sie weiterreichen müssen.

Signaturen von useContext

Schauen wir uns an, wie wir useContext verwenden:

const value = useContext(MyContext)

Hier ist, was jeder Teil bedeutet:

• value: Dies ist der aktuelle Kontextwert
• MyContext: Dies ist das Kontextobjekt (erstellt mit React.createContext)

Es ist so einfach! Lassen Sie uns das进一步 mit einem realen Beispiel erläutern.

Kontextverwendung über Hook

Lassen Sie uns einen einfachen Theme-Switcher für unsere App erstellen. Wir verwenden Kontext, um das aktuelle Thema zu speichern und useContext, um es in unseren Komponenten abzurufen.

Zuerst erstellen wir unseren Kontext:

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

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

export default ThemeContext;

Nun erstellen wir eine Komponente, die diesen Kontext verwendet:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
Ich bin ein {theme}-themen Button!
</button>
);
}

export default ThemedButton;

In diesem Beispiel gibt uns useContext(ThemeContext) den aktuellen Theme-Wert. Wir verwenden diesen Wert, um unseren Button zu stylen.

Nun sehen wir, wie wir diesen Kontext in unserer App bereitstellen können:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Willkommen in unserer thematischen App!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Hier umgeben wir unsere App mit ThemeContext.Provider und setzen den Wert auf "dark". Das bedeutet, dass jede Komponente innerhalb dieses Providers diesen Theme-Wert über useContext abrufen kann.

Kontext aktualisieren

Was ist, wenn wir den Benutzern erlauben möchten, Themen zu wechseln? Wir können dies tun, indem wir den Kontextwert aktualisieren. Lassen Sie uns unsere App-Komponente ändern:

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

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

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Willkommen in unserer thematischen App!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Thema wechseln</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Nun verwalten wir das Thema mit dem Zustand und haben eine Schaltfläche hinzugefügt, um es zu wechseln. Wenn sich das Thema ändert, werden alle Komponenten, die useContext(ThemeContext) verwenden, automatisch mit dem neuen Wert neu gerendert.

Fazit

Und das war's! Wir haben die Grundlagen von useContext in React behandelt. Lassen Sie uns die Hauptpunkte zusammenfassen:

1. Kontext bietet eine Möglichkeit, Daten durch den Komponentenbaum zu übertragen, ohne Prop-Bohren.
2. useContext ist ein Hook, der es uns ermöglicht, Kontext in funktionalen Komponenten einfach zu konsumieren.
3. Um useContext zu verwenden, müssen wir zuerst einen Kontext mit React.createContext erstellen.
4. Wir können den Kontext durch Ändern des value-Attributes des Provider-Komponenten aktualisieren.

Denken Sie daran, dass Kontext虽然强大，但 nicht immer die beste Lösung ist. Für einfache Props, die nur eine oder zwei Ebenen weitergegeben werden müssen, ist das reguläre Prop-Passing oft klarer. Denken Sie an Kontext wie die besondere Soße beim Familientreffen – verwenden Sie ihn, wenn Sie etwas weit verbreiten müssen, aber übertreiben Sie es nicht!

Ich hoffe, dieser Leitfaden hat useContext für Sie ein bisschen entmystifiziert. Üben Sie weiter und bald werden Sie ein Profi im Umgang mit React-Kontexten sein! Frohes Coden!

Methode	Beschreibung
React.createContext	Erstellt ein Kontextobjekt
useContext	Hook zum Konsumieren eines Kontextwerts
<Context.Provider>	Komponente, um einen Kontextwert ihren Kindern bereitzustellen

Credits: Image by storyset