In einer Schließung gefangen: Macken im React State Management verstehen

TLDR

• Abschlüsse sind wie Rucksäcke, die Funktionen mit sich herumtragen und die Daten ab dem Zeitpunkt ihrer Erstellung enthalten.
• Reaktionskomponenten verwenden Abschlüsse, um sich ihren Zustand und ihre Requisiten zu merken
• Veraltete Schließungen können zu Fehlern führen, wenn Statusaktualisierungen nicht wie erwartet funktionieren
• Funktionale Updates bieten eine zuverlässige Lösung für das Arbeiten mit dem neuesten Stand

Einführung

Haben Sie sich jemals gefragt, warum Ihre React-Statusaktualisierungen manchmal nicht ganz richtig funktionieren? Oder warum wird durch mehrmaliges schnelles Klicken auf eine Schaltfläche der Zähler nicht wie erwartet aktualisiert? Die Antwort liegt im Verständnis von Schließungen und wie React mit Zustandsaktualisierungen umgeht. In diesem Artikel werden wir diese Konzepte anhand einfacher Beispiele entschlüsseln, die dafür sorgen, dass alles klickt.

Was ist eine Schließung?

Stellen Sie sich einen Abschluss als eine Funktion vor, die eine winzige Erinnerung an den Ort ihrer Entstehung bewahrt. Es ist wie ein Polaroid-Schnappschuss aller Variablen, die zum Zeitpunkt der Erstellung der Funktion vorhanden waren. Sehen wir uns dies anhand eines einfachen Zählers in Aktion an:

function createPhotoAlbum() {
    let photoCount = 0;  // This is our "snapshot" variable

    function addPhoto() {
        photoCount += 1;  // This function "remembers" photoCount
        console.log(`Photos in album: ${photoCount}`);
    }

    function getPhotoCount() {
        console.log(`Current photos: ${photoCount}`);
    }

    return { addPhoto, getPhotoCount };
}

const myAlbum = createPhotoAlbum();
myAlbum.addPhoto();     // "Photos in album: 1"
myAlbum.addPhoto();     // "Photos in album: 2"
myAlbum.getPhotoCount() // "Current photos: 2"

In diesem Beispiel erinnern sich die Funktionen addPhoto und getPhotoCount an die Variable photoCount, auch nachdem die Ausführung von createPhotoAlbum abgeschlossen ist. Dies ist ein Abschluss in Aktion – Funktionen, die an ihren Geburtsort erinnern!

Warum Schließungen in React wichtig sind

In React spielen Verschlüsse eine entscheidende Rolle dabei, wie sich Komponenten ihren Zustand merken. Hier ist eine einfache Zählerkomponente:

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        // This function closes over 'count'
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{increment}">Add One</button>
        </div>
    );
}

Die Inkrementierungsfunktion bildet einen Abschluss um die Zählzustandsvariable. Auf diese Weise „merkt“ es sich, zu welcher Zahl hinzugefügt werden soll, wenn auf die Schaltfläche geklickt wird.

Das Problem: veraltete Schließungen

Hier wird es interessant. Schaffen wir eine Situation, in der Schließungen zu unerwartetem Verhalten führen können:

function BuggyCounter() {
    const [count, setCount] = useState(0);

    const incrementThreeTimes = () => {
        // All these updates see the same 'count' value!
        setCount(count + 1);  // count is 0
        setCount(count + 1);  // count is still 0
        setCount(count + 1);  // count is still 0!
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{incrementThreeTimes}">Add Three</button>
        </div>
    );
}

Wenn Sie auf diese Schaltfläche klicken, können Sie erwarten, dass sich die Anzahl um 3 erhöht. Aber Überraschung! Es erhöht sich nur um 1. Das liegt an einem „veralteten Abschluss“ – unsere Funktion bleibt beim Betrachten des ursprünglichen Werts von count hängen, als sie erstellt wurde.

Stellen Sie sich vor, Sie machen drei Fotos von einem Whiteboard mit der Zahl 0 und versuchen dann, jedem Foto eine 1 hinzuzufügen. Du hast immer noch 0 auf jedem Foto!

Die Lösung: Funktionsupdates

React bietet eine elegante Lösung für dieses Problem – Funktionsupdates:

function FixedCounter() {
    const [count, setCount] = useState(0);

    const incrementThreeTimes = () => {
        // Each update builds on the previous one
        setCount(current => current + 1);  // 0 -> 1
        setCount(current => current + 1);  // 1 -> 2
        setCount(current => current + 1);  // 2 -> 3
    };

    return (
        <div>
            <p>Count: {count}</p>
            <button onclick="{incrementThreeTimes}">Add Three</button>
        </div>
    );
}

Anstatt den Wert aus unserem Abschluss zu verwenden, sagen wir React jetzt: „Nimm den aktuellen Wert und füge eins hinzu.“ Es ist, als hätte man einen hilfreichen Assistenten, der sich immer die aktuelle Nummer auf dem Whiteboard ansieht, bevor er etwas hinzufügt!

Beispiel aus der Praxis: Social-Media-Like-Button

Sehen wir uns an, wie dies auf ein reales Szenario zutrifft – den „Gefällt mir“-Button eines Social-Media-Beitrags:

function createPhotoAlbum() {
    let photoCount = 0;  // This is our "snapshot" variable

    function addPhoto() {
        photoCount += 1;  // This function "remembers" photoCount
        console.log(`Photos in album: ${photoCount}`);
    }

    function getPhotoCount() {
        console.log(`Current photos: ${photoCount}`);
    }

    return { addPhoto, getPhotoCount };
}

const myAlbum = createPhotoAlbum();
myAlbum.addPhoto();     // "Photos in album: 1"
myAlbum.addPhoto();     // "Photos in album: 2"
myAlbum.getPhotoCount() // "Current photos: 2"

Abschluss

Wichtige Erkenntnisse

1. Abschlüsse sind Funktionen, die sich die Variablen merken, von denen aus sie erstellt wurden – wie Funktionen mit Gedächtnis.
2. Veraltete Abschlüsse treten auf, wenn Ihre Funktion veraltete Werte aus ihrem Speicher anstelle aktueller Werte verwendet.
3. Funktionsaktualisierungen in React (setCount(count => count 1)) stellen sicher, dass Sie immer mit dem aktuellsten Stand arbeiten.

Denken Sie daran: Wenn Sie den Status basierend auf seinem vorherigen Wert aktualisieren, bevorzugen Sie Funktionsaktualisierungen. Es ist, als hätte man einen zuverlässigen Assistenten, der immer den aktuellen Wert prüft, bevor man Änderungen vornimmt, anstatt aus dem Gedächtnis zu arbeiten!

Best Practices

• Verwenden Sie Funktionsaktualisierungen, wenn der neue Status vom vorherigen Status abhängt
• Seien Sie besonders vorsichtig bei Schließungen in asynchronen Vorgängen und Event-Handlern
• Im Zweifelsfall konsultieren Sie Ihre Werte, um nach veralteten Abschlüssen zu suchen
• Erwägen Sie die Verwendung der React DevTools zum Debuggen von Statusaktualisierungen

Mit diesen Konzepten sind Sie bestens gerüstet, um Zustandsaktualisierungen in React wie ein Profi zu handhaben! Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonIn einer Schließung gefangen: Macken im React State Management verstehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!