Utiliser des générateurs de magie dans React

Laissez-moi mettre les choses au clair : vous faites une overdose de crochets. Même vos identifiants et vos clés vivent comme un état dans votre application React. Les hooks useState déclenchent un effet secondaire de mise à jour du DOM virtuel chaque fois que l'état change. Stocker des données non pertinentes en tant qu'état est mauvais pour les performances.

Tous les cas ne peuvent pas être résolus avec des générateurs. Cependant, vous pouvez remplacer les modèles de hook complexes par des générateurs pour simplifier la logique, la rendant plus gérable et extensible.

TL;DR

Utilisez des générateurs pour générer des données de manière dynamique dans les composants React. Les générateurs peuvent simplifier la logique et réduire le recours aux hooks.

---

Je vais présenter un exemple simple pour vous aider à comprendre où et quand utiliser les générateurs.

Que sont les générateurs ?

Les générateurs sont des fonctions qui peuvent être suspendues et reprises. Ils sont créés à l'aide d'une déclaration de fonction* et d'expressions de rendement.

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 }

Vous pouvez les utiliser pour parcourir une collection de données ou pour générer une séquence de données, qui, à leur tour, pourraient être utilisées pour restituer le contenu à l'intérieur des composants.

Toujours confus ? Construisons un exemple simple pour comprendre l'utilisation des générateurs.

Exemple de titre

Disons que vous avez une liste de titres que vous souhaitez afficher dans votre composant.

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

Vous pouvez le faire en parcourant le tableau des titres et en restituant chaque titre à l'intérieur du composant, en stockant l'index en tant que variable d'état.

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>
    );
};

Cela fonctionne bien jusqu'à ce que vous disposiez d'un tableau linéaire de titres sur lesquels vous souhaitez parcourir et afficher à plusieurs reprises. Maintenant, que se passe-t-il si vous souhaitez créer un modèle avec vos titres ? Par exemple, affichez d'abord un message de bienvenue en fonction de l'heure de la journée, puis affichez le jour de la semaine et enfin, enchaînez avec une pensée de motivation aléatoire.

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

Maintenant, vous ne pouvez pas simplement parcourir un ensemble de données statiques. Au lieu de cela, vous devez calculer chaque titre de manière dynamique.

Mais tu es le méga-esprit. Vous avez une idée : pourquoi ne pas créer trois fonctions qui calculent chaque partie du motif et utilisent leur sortie comme texte de rendu ?

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)];
}

Maintenant, vous pouvez utiliser ces fonctions pour afficher les titres à l'intérieur du composant.

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>
    );
};

Avez-vous remarqué quelque chose ? Vous avez modifié toute la logique de votre composant. Pour simplifier la logique et garder vos composants propres, vous pouvez utiliser des générateurs.

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

const pattern = patternGenerator();

Maintenant, vous pouvez utiliser ce générateur pour restituer les titres à l'intérieur du composant.

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>
    );

};

De cette façon, vous pouvez garder vos composants propres et votre logique simple. Les générateurs peuvent être utilisés pour simplifier la logique et donner une pause aux hooks.

Les générateurs résument également la logique derrière la façon dont les données sont générées. De plus, vous pouvez facilement étendre le modèle en ajoutant plus de fonctions au générateur ou en modifiant l'ordre des fonctions sans modifier la logique à l'intérieur du composant.

Pour faire un pas en avant, vous pouvez également créer un hook personnalisé pour gérer la logique du générateur.

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 }

Cela garantit également que l'API du générateur reste cohérente entre les composants, quelle que soit la façon dont la logique change à l'intérieur du générateur.

Par conséquent, ils offrent plus de flexibilité et de contrôle sur le processus de génération de données.

Avantages de l'utilisation de générateurs :

1. Simplifiez la logique des composants avec une API cohérente et une séparation des préoccupations entre la génération de données et le rendu.
2. Activez la génération de données à la demande pour minimiser l'utilisation de l'état et éviter le stockage de données inutile.
3. Fournissez un contrôle précis et une approche flexible et extensible de la génération de données.

Points à retenir

1. Les générateurs ne sont pas exclusifs à React mais sont une fonctionnalité purement JavaScript.
2. La fonctionnalité pause et reprise des générateurs les rend économes en mémoire.
3. Ils ne génèrent pas d'effets secondaires et ne déclenchent pas de mises à jour ou de mutations irrégulières.

Maintenant, je suis à mon endroit heureux !

Conclusion

Les générateurs aident à rationaliser le processus de diffusion des données et à séparer les problèmes entre la génération de données et les composants de rendu, offrant ainsi un plus grand contrôle et une plus grande flexibilité sur la génération de données sans compromettre les performances.

Vous pouvez également consulter cette excellente conférence d'Anjana Vakil sur les générateurs en JavaScript.

J'espère que cet article vous aidera à comprendre où et quand utiliser les générateurs. Si vous avez des questions ou des commentaires, n'hésitez pas à me contacter sur Twitter.

Publié à l'origine sur le blog d'ashishk1331.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!