useContext: Hooks reagieren

useContext in React mit zwei praktischen Miniprojekten

Einführung

In React ist die Verwaltung von Daten zwischen Komponenten unerlässlich, insbesondere in größeren Anwendungen, in denen mehrere Komponenten Zugriff auf dieselben Daten benötigen. Das Bohren von Stützen – das Weiterleiten von Stützen über mehrere Ebenen eines Komponentenbaums – kann schnell mühsam werden. Hier glänzt der useContext-Hook von React. Mit useContext können Sie Daten komponentenübergreifend teilen, ohne Requisiten manuell übergeben zu müssen, was es zu einem unschätzbar wertvollen Werkzeug für die Zustandsverwaltung macht.

In diesem Artikel beginnen wir mit einer detaillierten Erläuterung von useContext, seiner Syntax und seinen Vorteilen. Anschließend werden wir dieses Verständnis festigen, indem wir zwei Miniprojekte aufbauen:

1. Themenumschalter: Ein einfacher Themenumschalter, der zeigt, wie useContext den globalen Status verwaltet.
2. Benutzerauthentifizierungsstatus: Eine App zur Verwaltung des Benutzeranmeldestatus, die demonstriert, wie useContext für reale Anwendungsfälle verwendet wird.

Am Ende dieses Tutorials sind Sie gut gerüstet, um useContext sicher in jedem React-Projekt zu verwenden.

---

Was ist useContext?

Die Grundlagen von useContext

useContext ist ein React-Hook, der es Komponenten ermöglicht, einen Kontext direkt zu abonnieren. Es hilft, den Aufwand des Propellerbohrens zu vermeiden, indem es Komponenten ermöglicht, auf globale Daten vom nächstgelegenen Anbieter im Komponentenbaum zuzugreifen.

Syntax von useContext

Hier ist die grundlegende Syntax zum Erstellen und Verwenden eines Kontexts:

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

Erläuterung

1. Kontext erstellen: createContext initialisiert ein Kontextobjekt, das die Daten enthält, die wir teilen möchten. Der Parameter defaultValue ist optional, kann aber als Fallback verwendet werden, wenn kein Anbieter gefunden wird.
2. Verwenden des Kontexts mit useContext: Innerhalb einer Komponente verwenden wir useContext(MyContext), um auf den aktuellen Wert des Kontexts zuzugreifen. Dieser Wert wird durch den nächstgelegenen bestimmt. über der Komponente im Komponentenbaum.

Beispiel für einen Kontextanbieter und -konsumenten

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

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

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

In diesem Beispiel:

• ThemeContext ist unser Kontext, initialisiert mit dem Standardwert „light“.
• ThemeProvider umschließt DisplayTheme und stellt einen Wert = „dark“ bereit, wodurch „dark“ zum aktuellen Thema innerhalb des ThemeProviders wird.
• Die DisplayTheme-Komponente verwendet useContext(ThemeContext), um auf das Design zuzugreifen und es darzustellen.

Hier werden die Grundlagen behandelt. Lassen Sie uns nun in die Projekte eintauchen, um dieses Wissen in praktischen Szenarien anzuwenden.

---

Miniprojekt 1: Erstellen eines Theme Switchers

Unser erstes Projekt ist ein einfacher Theme-Switcher, der demonstriert, wie useContext zum Verwalten des globalen Anwendungsstatus für Themes verwendet werden kann.

Schritt 1: Richten Sie den Kontext ein

import React, { useContext, createContext } from 'react';

const MyContext = createContext(defaultValue); // Step 1: Create a context

function MyComponent() {
    const contextValue = useContext(MyContext); // Step 2: Use the context
    return <div>{contextValue}</div>;
}

ThemeContext stellt hier zwei Werte bereit: das aktuelle Thema und eine Funktion zum Umschalten. Der Anbieter verpackt die App-Komponenten und stellt so das Theme und die Umschaltfunktion global zur Verfügung.

Schritt 2: Konsumieren Sie den Kontext in Komponenten

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light'); // default theme is light

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

function DisplayTheme() {
    const theme = useContext(ThemeContext); // Consuming the context
    return <p>The current theme is {theme}</p>;
}

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
        </ThemeProvider>
    );
}

Schritt 3: Nutzen Sie den Anbieter in der Haupt-App

import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    );
}

Jetzt können Sie zwischen hellen und dunklen Themen wechseln, indem Sie auf die Schaltfläche klicken. Der Themenstatus wird daneben angezeigt. Dieses Projekt zeigt, wie useContext es mehreren Komponenten ermöglicht, globale Zustandsänderungen gemeinsam zu nutzen und darauf zu reagieren.

---

Miniprojekt 2: Benutzerauthentifizierung verwalten

Für das zweite Projekt erstellen wir eine einfache App, die den Authentifizierungsstatus eines Benutzers mithilfe von useContext verfolgt.

Schritt 1: Erstellen Sie einen Authentifizierungskontext

function ThemeToggler() {
    const { theme, toggleTheme } = useContext(ThemeContext); // Access context values
    return (
        <button onClick={toggleTheme}>
            Switch to {theme === 'light' ? 'dark' : 'light'} mode
        </button>
    );
}

function DisplayTheme() {
    const { theme } = useContext(ThemeContext);
    return <p>Current Theme: {theme}</p>;
}

Schritt 2: Erstellen Sie Anmelde- und Abmeldekomponenten

function App() {
    return (
        <ThemeProvider>
            <DisplayTheme />
            <ThemeToggler />
        </ThemeProvider>
    );
}

export default App;

Schritt 3: Benutzerstatus anzeigen

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
    const [isAuthenticated, setIsAuthenticated] = useState(false);

    const login = () => setIsAuthenticated(true);
    const logout = () => setIsAuthenticated(false);

    return (
        <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
            {children}
        </AuthContext.Provider>
    );
}

Schritt 4: Komponenten in der App kombinieren

function LoginButton() {
    const { login } = useContext(AuthContext); // Access login function
    return <button onClick={login}>Login</button>;
}

function LogoutButton() {
    const { logout } = useContext(AuthContext); // Access logout function
    return <button onClick={logout}>Logout</button>;
}

Jetzt haben Sie eine einfache Authentifizierungsstatus-App, bei der die Anmelde- und Abmeldeschaltflächen den Status des Benutzers in der gesamten App aktualisieren. Dieses Projekt zeigt, wie useContext den Status einer Anwendung in realen Szenarien verarbeiten kann.

---

Abschluss

Bei diesen beiden Projekten haben Sie gesehen, wie useContext den Datenaustausch zwischen Komponenten vereinfacht, ohne dass Bohrarbeiten erforderlich sind. Die Themenwechsel- und Authentifizierungsstatusprojekte bieten praktische Einblicke in die effektive Verwaltung des globalen Status. Unabhängig davon, ob Sie Themen umschalten oder die Benutzerauthentifizierung durchführen, bietet useContext ein leistungsstarkes Tool zum Erstellen effizienter und organisierter Anwendungen.

Das obige ist der detaillierte Inhalt vonuseContext: Hooks reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!