Gunakan penjana untuk sihir dalam React

Biar saya luruskan: anda terlebih dos pada cangkuk. Malah ID dan kunci anda hidup sebagai keadaan dalam apl React anda. cangkuk useState mencetuskan kesan sampingan mengemas kini DOM maya apabila keadaan berubah. Menyimpan data yang tidak berkaitan sebagai keadaan tidak baik untuk prestasi.

Tidak semua kes boleh diselesaikan dengan penjana. Walau bagaimanapun, anda boleh menggantikan corak cangkuk yang kompleks dengan penjana untuk memudahkan logik, menjadikannya lebih mudah diurus dan dipanjangkan.

TL;DR

Gunakan penjana untuk menjana data secara dinamik dalam komponen React. Penjana boleh memudahkan logik dan mengurangkan pergantungan pada cangkuk.

---

Saya akan membentangkan contoh mudah untuk membantu anda memahami tempat dan masa untuk menggunakan penjana.

Apakah penjana?

Penjana ialah fungsi yang boleh dijeda dan disambung semula. Ia dicipta menggunakan pengisytiharan fungsi* dan ungkapan hasil.

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 }

Anda boleh menggunakannya untuk mengulangi koleksi data atau menjana urutan data, yang seterusnya, boleh digunakan untuk memaparkan kandungan di dalam komponen.

Masih keliru? Mari bina contoh mudah untuk memahami penggunaan penjana.

Contoh Tajuk

Katakan anda mempunyai senarai tajuk yang ingin anda paparkan dalam komponen anda.

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

Anda boleh melakukannya dengan mengulangi tatasusunan tajuk dan memaparkan setiap tajuk dalam komponen, melalui menyimpan indeks sebagai pembolehubah keadaan.

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

Ini berfungsi dengan baik sehingga anda mempunyai tatasusunan linear tajuk yang ingin anda ulangi dan paparkan berulang kali. Sekarang, bagaimana jika anda ingin mencipta corak dengan tajuk berita anda? Sebagai contoh, pertama, paparkan mesej ucapan berdasarkan masa dalam hari, kemudian paparkan hari dalam seminggu, dan akhirnya susulan dengan pemikiran motivasi rawak.

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

Kini, anda tidak boleh mengulangi set data statik sahaja. Sebaliknya, anda perlu mengira setiap tajuk secara dinamik.

Tetapi anda adalah megamind. Anda mendapat idea: mengapa tidak mencipta tiga fungsi yang mengira setiap bahagian corak dan menggunakan outputnya sebagai teks pemaparan?

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

Kini, anda boleh menggunakan fungsi ini untuk memaparkan tajuk utama dalam komponen.

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

Adakah anda perasan sesuatu? Anda menukar keseluruhan logik komponen anda. Untuk memudahkan logik dan memastikan komponen anda bersih, anda boleh menggunakan penjana.

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

const pattern = patternGenerator();

Kini, anda boleh menggunakan penjana ini untuk memaparkan tajuk utama dalam komponen.

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

};

Dengan cara ini, anda boleh memastikan komponen anda bersih dan logik anda mudah. Penjana boleh digunakan untuk memudahkan logik dan memberikan mata kail rehat.

Penjana juga mengabstraksikan logik di sebalik cara data dijana. Selain itu, anda boleh melanjutkan corak dengan mudah dengan menambahkan lebih banyak fungsi pada penjana atau menukar susunan fungsi tanpa mengubah logik di dalam komponen.

Untuk mengorak langkah ke hadapan, anda juga boleh membuat cangkuk tersuai untuk mengendalikan logik penjana.

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 }

Ini juga memastikan bahawa API untuk penjana kekal konsisten merentas komponen tidak kira bagaimana logik beralih di dalam penjana.

Oleh itu, ia memberikan lebih fleksibiliti dan kawalan ke atas proses penjanaan data.

Faedah menggunakan penjana:

1. Ringkaskan logik komponen dengan API yang konsisten dan pengasingan kebimbangan antara penjanaan data dan pemaparan.
2. Dayakan penjanaan data atas permintaan untuk meminimumkan penggunaan keadaan dan mengelakkan storan data yang tidak diperlukan.
3. Sediakan kawalan terperinci dan pendekatan yang fleksibel dan boleh dilanjutkan kepada penjanaan data.

Perkara yang Perlu Diingati

1. Penjana bukan eksklusif untuk React tetapi merupakan ciri JavaScript tulen.
2. Fungsi jeda dan sambung semula penjana menjadikannya cekap ingatan.
3. Ia tidak menghasilkan kesan sampingan atau mencetuskan kemas kini atau mutasi yang tidak teratur.

Sekarang saya berada di tempat saya gembira!

Kesimpulan

Penjana membantu menyelaraskan proses penyajian data dan memisahkan kebimbangan antara penjanaan data dan komponen pemaparan, menawarkan kawalan dan fleksibiliti yang lebih besar ke atas penjanaan data tanpa menjejaskan prestasi.

Anda juga boleh menyemak ceramah hebat ini oleh Anjana Vakil mengenai Penjana dalam JavaScript.

Saya harap artikel ini membantu anda memahami di mana dan bila untuk menggunakan penjana. Jika anda mempunyai sebarang soalan atau maklum balas, sila hubungi saya di Twitter.

Asal disiarkan pada blog ashishk1331.

Atas ialah kandungan terperinci Gunakan penjana untuk sihir dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!