React でジェネレーターを使用して魔法を実現する-jsチュートリアル-php.cn

Use generators for magic in React

はっきり言っておきますが、あなたはフックの過剰摂取です。 ID とキーさえも React アプリの状態として生きています。 useState フックは、状態が変化するたびに仮想 DOM を更新するという副作用を引き起こします。無関係なデータを状態として保存すると、パフォーマンスが低下します。

すべてのケースをジェネレーターで解決できるわけではありません。ただし、複雑なフックパターンをジェネレーターに置き換えてロジックを簡素化し、管理しやすく拡張しやすくすることができます。

TL;DR

ジェネレーターを使用して、React コンポーネントでデータを動的に生成します。ジェネレーターを使用すると、ロジックを簡素化し、フックへの依存を減らすことができます。

ジェネレーターをいつ、どこで使用するかを理解するのに役立つ簡単な例を紹介します。

ジェネレーターとは何ですか?

ジェネレーターは、一時停止したり再開したりできる関数です。これらは、function* 宣言と 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
];

ログイン後にコピー

静的データのセットを単純に反復処理することはできません。代わりに、各見出しを動的に計算する必要があります。

しかし、あなたはメガマインドです。あなたはアイデアを思いつきました。パターンの各部分を計算し、その出力をレンダリングテキストとして使用する 3 つの関数を作成してはどうでしょうか?

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

};

ログイン後にコピー

こうすることで、コンポーネントをクリーンに保ち、ロジックをシンプルに保つことができます。ジェネレーターを使用すると、ロジックを簡素化し、フックに休憩を与えることができます。

ジェネレーターは、データの生成方法の背後にあるロジックも抽象化します。さらに、コンポーネント内のロジックを変更せずに、ジェネレーターに関数を追加したり、関数の順序を変更したりすることで、パターンを簡単に拡張できます。

さらに一歩前進するには、ジェネレーターロジックを処理するカスタムフックを作成することもできます。

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 がコンポーネント間で一貫性を保つことも保証されます。

したがって、データ生成プロセスの柔軟性と制御が向上します。