Verwenden Sie Generatoren für Magie in React

Lassen Sie es mich klarstellen: Sie nehmen eine Überdosis an Haken. Sogar Ihre IDs und Schlüssel bleiben in Ihrer React-App erhalten. useState-Hooks lösen einen Nebeneffekt der Aktualisierung des virtuellen DOM aus, wenn sich der Status ändert. Das Speichern irrelevanter Daten als Status beeinträchtigt die Leistung.

Nicht alle Fälle können mit Generatoren gelöst werden. Sie können jedoch komplexe Hook-Muster durch Generatoren ersetzen, um die Logik zu vereinfachen und sie leichter verwaltbar und erweiterbar zu machen.

TL;DR

Verwenden Sie Generatoren, um Daten dynamisch in React-Komponenten zu generieren. Generatoren können die Logik vereinfachen und die Abhängigkeit von Hooks verringern.

---

Ich präsentiere ein einfaches Beispiel, um Ihnen zu helfen, zu verstehen, wo und wann Sie Generatoren verwenden sollten.

Was sind Generatoren?

Generatoren sind Funktionen, die angehalten und fortgesetzt werden können. Sie werden mithilfe einer Funktions*-Deklaration und Yield-Ausdrücken erstellt.

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

Sie können sie verwenden, um eine Datensammlung zu durchlaufen oder eine Datensequenz zu generieren, die wiederum zum Rendern von Inhalten innerhalb von Komponenten verwendet werden könnte.

Immer noch verwirrt? Lassen Sie uns ein einfaches Beispiel erstellen, um die Verwendung von Generatoren zu verstehen.

Beispiel für eine Überschrift

Angenommen, Sie haben eine Liste mit Schlagzeilen, die Sie in Ihrer Komponente rendern möchten.

const headlines = [
    "Local Shops Thrive",
    "Team Wins Finals",
    "Stay Flu-Free",
    "New Phone Launch",
    "Sunny Week Ahead",
];

Sie können dies tun, indem Sie über das Headlines-Array iterieren und jede Headline innerhalb der Komponente rendern, indem Sie den Index als Statusvariable speichern.

import { useState } from "react";

const Headlines = () => {
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{headlines[index]}</h1>
            <button onClick={() => setIndex((index + 1) % headlines.length)}>
                Next
            </button>
        </div>
    );
};

Dies funktioniert gut, bis Sie eine lineare Reihe von Schlagzeilen haben, die Sie durchlaufen und wiederholt anzeigen möchten. Was wäre nun, wenn Sie mit Ihren Schlagzeilen ein Muster erstellen möchten? Zeigen Sie beispielsweise zunächst eine Begrüßungsnachricht basierend auf der Tageszeit an, zeigen Sie dann den Wochentag an und schließen Sie mit einem zufälligen Motivationsgedanken an.

const headlines = [
    "Good Morning", // Greeting message
    "Today is Monday", // Day of the week
    "Stay positive", // Motivational thought
];

Jetzt können Sie nicht einfach über einen Satz statischer Daten iterieren. Stattdessen müssen Sie jede Überschrift dynamisch berechnen.

Aber du bist der Megamind. Sie haben eine Idee: Warum erstellen Sie nicht drei Funktionen, die jeden Teil des Musters berechnen und ihre Ausgabe als Rendertext verwenden?

function getGreetingMessage() {
    const hours = new Date().getHours();
    if (hours < 12) {
        return "Good Morning";
    } else if (hours < 18) {
        return "Good Afternoon";
    } else {
        return "Good Evening";
    }
}

function getDayOfTheWeek() {
    const days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];
    return `Today is ${days[new Date().getDay()]}`;
}

function getMotivationalThought() {
    const thoughts = ["Stay positive", "Keep going", "You're awesome"];
    return thoughts[Math.floor(Math.random() * thoughts.length)];
}

Jetzt können Sie diese Funktionen verwenden, um die Schlagzeilen innerhalb der Komponente zu rendern.

import { useState } from "react";

const Headlines = () => {
    const pattern = [
        getGreetingMessage,
        getDayOfTheWeek,
        getMotivationalThought,
    ];
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern[index]()}</h1>
            <button onClick={() => setIndex((index + 1) % pattern.length)}>
                Next
            </button>
        </div>
    );
};

Ist dir etwas aufgefallen? Sie haben die gesamte Logik Ihrer Komponente geändert. Um die Logik zu vereinfachen und Ihre Komponenten sauber zu halten, können Sie Generatoren verwenden.

function* patternGenerator() {
    yield getGreetingMessage();
    yield getDayOfTheWeek();
    yield getMotivationalThought();
}

const pattern = patternGenerator();

Jetzt können Sie diesen Generator verwenden, um die Schlagzeilen innerhalb der Komponente zu rendern.

import { useState } from "react";

const Headlines = () => {
const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern.next().value}</h1>
            <button onClick={() => setIndex((index + 1) % 3}>Next</button>
        </div>
    );

};

Auf diese Weise können Sie Ihre Komponenten sauber und Ihre Logik einfach halten. Generatoren können verwendet werden, um die Logik zu vereinfachen und Hooks eine Pause zu gönnen.

Generatoren abstrahieren auch die Logik hinter der Art und Weise, wie die Daten generiert werden. Außerdem können Sie das Muster problemlos erweitern, indem Sie dem Generator weitere Funktionen hinzufügen oder die Reihenfolge der Funktionen ändern, ohne die Logik innerhalb der Komponente zu ändern.

Um einen Schritt nach vorne zu machen, können Sie auch einen benutzerdefinierten Hook erstellen, um die Generatorlogik zu verwalten.

function* generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generator();
console.log(gen.next()); // { value: 1, done: false }
console.log(gen.next()); // { value: 2, done: false }
console.log(gen.next()); // { value: 3, done: false }
console.log(gen.next()); // { value: undefined, done: true }

Dadurch wird auch sichergestellt, dass die API für den Generator komponentenübergreifend konsistent bleibt, unabhängig davon, wie sich die Logik innerhalb des Generators verschiebt.

Daher bieten sie mehr Flexibilität und Kontrolle über den Datengenerierungsprozess.

Vorteile der Verwendung von Generatoren:

1. Vereinfachen Sie die Komponentenlogik mit einer konsistenten API und der Trennung von Belangen zwischen Datengenerierung und -rendering.
2. Aktivieren Sie die bedarfsgesteuerte Datengenerierung, um die Statusnutzung zu minimieren und unnötige Datenspeicherung zu vermeiden.
3. Bieten Sie eine differenzierte Kontrolle und einen flexiblen, erweiterbaren Ansatz zur Datengenerierung.

Punkte, die man sich merken sollte

1. Generatoren gibt es nicht nur bei React, sondern sind eine reine JavaScript-Funktion.
2. Die Pause- und Wiederaufnahmefunktion von Generatoren macht sie speichereffizient.
3. Sie erzeugen keine Nebenwirkungen und lösen keine unregelmäßigen Aktualisierungen oder Mutationen aus.

Jetzt bin ich an meinem glücklichen Ort!

Abschluss

Generatoren tragen dazu bei, den Prozess der Datenbereitstellung zu rationalisieren und die Belange zwischen Datengenerierungs- und Rendering-Komponenten zu trennen. Dadurch bieten sie eine größere Kontrolle und Flexibilität bei der Datengenerierung, ohne die Leistung zu beeinträchtigen.

Sie können sich auch diesen großartigen Vortrag von Anjana Vakil über Generatoren in JavaScript ansehen.

Ich hoffe, dieser Artikel hilft Ihnen zu verstehen, wo und wann Sie Generatoren verwenden sollten. Wenn Sie Fragen oder Feedback haben, können Sie mich gerne auf Twitter kontaktieren.

Ursprünglich auf dem Blog von ashishk1331 gepostet.

Das obige ist der detaillierte Inhalt vonVerwenden Sie Generatoren für Magie in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!