So entwerfen Sie useState- und useEffect-Hooks: Ein Leitfaden für Anfänger

Bei der Entwicklung moderner Anwendungen, insbesondere Web-Apps, müssen Sie häufig Daten verwalten, die sich im Laufe der Zeit ändern. Wenn ein Benutzer beispielsweise auf eine Schaltfläche klickt, möchten wir möglicherweise die Anzeige aktualisieren oder neue Daten von einem Server abrufen. Hooks wie useState und useEffect helfen uns dabei, dies reibungslos zu bewältigen. Lassen Sie uns die Funktionsweise dieser Konzepte aufschlüsseln und Schritt für Schritt untersuchen, wie man sie gestaltet.

Was sind useState und useEffect?

• useState: Mit diesem Hook können Sie einer Komponente einen Status hinzufügen. Stellen Sie sich „Status“ als alle Daten vor, die sich eine Komponente zwischen den Renderings merken muss, etwa ein Zähler oder eine Liste von Elementen.
• useEffect: Mit diesem Hook können Sie Aktionen ausführen, nachdem die Komponente gerendert wurde, z. B. Daten abrufen, Timer einrichten oder den Seitentitel ändern.

Um diesen Leitfaden leicht verständlich zu machen, zerlegen wir jeden Hook auf seine wesentliche Logik und bauen darauf auf.

Entwerfen des useState-Hooks

1. Grundlagen der Staatsverwaltung verstehen

Stellen Sie sich vor, Sie haben eine einfache Zähler-App. Jedes Mal, wenn Sie eine Schaltfläche drücken, erhöht sich die Zahl um 1. Damit dies funktioniert, müssen Sie den aktuellen Zählerstand irgendwo speichern und ihn jedes Mal aktualisieren, wenn auf die Schaltfläche geklickt wird.

2. Ziel des Nutzungszustands

useState sollte:

• Speichern Sie einen Wert.
• Bieten Sie eine Möglichkeit, diesen Wert zu aktualisieren.
• Lösen Sie ein erneutes Rendern (oder Neuzeichnen) der Komponente aus, wenn sich der Wert ändert.

3. Grundkonzept von useState

Hier ist eine grundlegende Aufschlüsselung, wie useState unter der Haube funktionieren könnte:

• Wir benötigen eine Variable, um den Wert unseres Zustands zu speichern (z. B. einen Zähler).
• Wir benötigen eine Funktion, um diesen Wert zu aktualisieren.
• Wenn der Wert aktualisiert wird, müssen wir die Komponente neu rendern, um den neuen Wert widerzuspiegeln.

4. UseState von Grund auf entwerfen

Lassen Sie uns eine einfache Struktur für useState:

1. Ersteinrichtung: Erstellen Sie eine Funktion namens useState, die einen Anfangswert als Eingabe verwendet.
2. Aktuellen Wert zurückgeben und Funktion aktualisieren: Die Funktion sollte zwei Dinge zurückgeben:
   • Der aktuelle Wert.
   • Eine Funktion, die diesen Wert aktualisieren kann.
3. Erneutes Rendern auslösen: Stellen Sie sicher, dass jede Aktualisierung des Status dazu führt, dass die Komponente erneut gerendert wird (wir werden diesen Teil in unserem Beispiel vereinfachen).

Beispielcode

So könnte eine einfache Version von useState aussehen:

function useState(initialValue) {
    // Step 1: Create a variable to hold the current state value
    let currentState = initialValue;

    // Step 2: Define a function to update this value
    function setState(newValue) {
        // Update the state
        currentState = newValue;

        // Simulate a re-render (you’d do this differently in a real application)
        render();
    }

    // Step 3: Return the state and the function to update it
    return [currentState, setState];
}

// Usage example:
const [count, setCount] = useState(0);
console.log(count); // Outputs: 0
setCount(1);         // Updates state to 1
console.log(count);  // Outputs: 1 (in real use, this would trigger re-rendering)

Entwerfen des useEffect-Hooks

Während useState lokale Daten verarbeitet, können wir mit useEffect „Nebeneffekte“ wie das Abrufen von Daten oder das Aktualisieren des Dokumenttitels ausführen. Ein Nebeneffekt ist jegliche Interaktion mit der Außenwelt.

1. Ziel des Nutzungseffekts

useEffect sollte:

• Führen Sie eine Funktion aus, nachdem die Komponente gerendert wurde.
• Optional alle Effekte bereinigen, wenn die Komponente entfernt wird.
• Optional erneut ausführen, wenn sich die angegebenen Daten ändern.

2. Grundkonzept von useEffect

Die Hauptbestandteile von useEffect sind:

1. Effektfunktion: Dies ist die Aktion, die Sie nach dem Rendern ausführen möchten, z. B. das Protokollieren einer Nachricht, das Abrufen von Daten oder das Starten eines Timers.
2. Abhängigkeitsarray: Diese optionale Liste teilt useEffect mit, wann es erneut ausgeführt werden soll. Wenn sich ein Wert in dieser Liste ändert, wird der Effekt erneut ausgeführt.

3. UseEffect von Grund auf entwerfen

Lassen Sie uns eine einfache Struktur für useEffect einrichten:

1. Funktionsausführung: Erstellen Sie eine Funktion namens useEffect, die zwei Parameter benötigt:
   • Eine Effektfunktion zum Ausführen.
   • Ein optionales Abhängigkeitsarray.
2. Effekt nach dem Rendern ausführen: Stellen Sie sicher, dass die Effektfunktion nach dem Rendern der Komponente ausgeführt wird.
3. Auswirkung bei Abhängigkeitsänderung ausführen: Wenn ein Abhängigkeitsarray bereitgestellt wird, führen Sie den Effekt nur dann erneut aus, wenn sich eine der Abhängigkeiten ändert.

Beispielcode

Hier ist eine Basisversion von useEffect:

let previousDeps;  // To store previous dependencies

function useEffect(effectFunction, dependencies) {
    // Step 1: Check if dependencies have changed
    const hasChanged = dependencies
        ? !previousDeps || dependencies.some((dep, i) => dep !== previousDeps[i])
        : true;

    // Step 2: Run the effect function if dependencies changed
    if (hasChanged) {
        effectFunction();
        previousDeps = dependencies;  // Update the previous dependencies
    }
}

// Usage example:
useEffect(() => {
    console.log("Effect has run!");

    // Simulate cleanup if needed
    return () => console.log("Cleanup effect!");
}, [/* dependencies */]);

Alles zusammenfügen: Beispielanwendung

Simulieren wir eine Komponente mit useState und useEffect.

function Component() {
    // Initialize state with useState
    const [count, setCount] = useState(0);

    // Log a message each time count changes with useEffect
    useEffect(() => {
        console.log(`Count has changed to: ${count}`);
    }, [count]);  // Re-run effect if count changes

    // Simulate user interaction
    setCount(count + 1);
}

In diesem Beispiel:

• Wir erstellen einen Zählstatus mit useState.
• Wir verwenden useEffect, um eine Nachricht zu protokollieren, wenn sich die Anzahl ändert.
• Jedes Mal, wenn setCount die Anzahl aktualisiert, wird ein erneutes Rendern ausgelöst, wodurch useEffect erneut ausgeführt wird, wenn sich die Anzahl geändert hat.

Zusammenfassung

Das Entwerfen von useState und useEffect umfasst Folgendes:

1. Speichern von Werten (useState) und Bereitstellung einer Möglichkeit, sie zu aktualisieren und erneut zu rendern.
2. Funktionen nach dem Rendern ausführen (useEffect), mit Optionen für Bereinigung und Abhängigkeitsverfolgung.

Diese Hooks helfen Ihnen beim Erstellen dynamischer und interaktiver Anwendungen, sei es für einfache Zähler, das Abrufen von Daten oder eine komplexere Zustandsverwaltung. Mit einer Grundlage in diesen Hooks sind Sie gut gerüstet, um Apps zu erstellen, die auf Benutzeraktionen und Datenänderungen in Echtzeit reagieren!

Das obige ist der detaillierte Inhalt vonSo entwerfen Sie useState- und useEffect-Hooks: Ein Leitfaden für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!