在 React 中使用生成器发挥魔法-js教程-PHP中文网

Use generators for magic in React

让我直说吧：你用药过量了。甚至你的 ID 和密钥也以状态的形式存在于你的 React 应用程序中。只要状态发生变化，useState 钩子就会触发更新虚拟 DOM 的副作用。将不相关的数据存储为状态不利于性能。

并非所有情况都可以用生成器解决。但是，您可以用生成器替换复杂的钩子模式来简化逻辑，使其更易于管理和扩展。

长话短说

使用生成器在 React 组件中动态生成数据。生成器可以简化逻辑，减少对钩子的依赖。

我将提供一个简单的示例来帮助您了解何时何地使用生成器。

什么是发电机？

生成器是可以暂停和恢复的函数。它们是使用函数*声明和yield表达式创建的。

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 }

登录后复制

您可以使用它们来迭代数据集合或生成数据序列，而数据序列又可用于在组件内呈现内容。

仍然困惑吗？让我们构建一个简单的示例来了解生成器的使用。

标题示例

假设您有一个要在组件中呈现的标题列表。

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

登录后复制

您可以通过迭代标题数组并通过将索引存储为状态变量来渲染组件内的每个标题来实现此目的。

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

登录后复制

这很有效，直到您有一个要迭代并重复显示的标题线性数组。现在，如果您想用标题创建一个模式该怎么办？例如，首先根据一天中的时间显示一条问候消息，然后显示一周中的某一天，最后跟进一个随机的激励想法。

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

登录后复制

现在，您不能简单地迭代一组静态数据。相反，您需要动态计算每个标题。

但你是大智者。您想到了一个想法：为什么不创建三个函数来计算模式的每个部分并将其输出用作渲染文本？

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

登录后复制

现在，您可以使用这些函数在组件内渲染标题。

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

登录后复制

你注意到什么了吗？您更改了组件的整个逻辑。为了简化逻辑并保持组件干净，您可以使用生成器。

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

const pattern = patternGenerator();

登录后复制

现在，您可以使用此生成器在组件内渲染标题。

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

};

登录后复制

这样，您就可以保持组件干净且逻辑简单。生成器可用于简化逻辑并让 hooks 休息一下。

生成器还抽象了数据生成背后的逻辑。另外，您可以通过向生成器添加更多函数或更改函数的顺序来轻松扩展模式，而无需更改组件内部的逻辑。

要向前迈出一步，您还可以创建一个自定义挂钩来处理生成器逻辑。

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 }

登录后复制

这也确保了生成器的 API 在组件之间保持一致，无论生成器内部的逻辑如何变化。

因此，它们为数据生成过程提供了更大的灵活性和控制力。