在 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 在元件之間保持一致，無論生成器內部的邏輯如何變化。

因此，它們為資料產生過程提供了更大的靈活性和控制力。