از ژنراتورها برای جادو در React استفاده کنید

بگذارید واضح بگویم: شما در مصرف قلاب ها بیش از حد مصرف می کنید. حتی شناسه‌ها و کلیدهای شما در برنامه React شما به‌عنوان وضعیت موجود هستند. useState هر زمان که وضعیت تغییر کند، قلاب ها باعث ایجاد یک اثر جانبی به روز رسانی DOM مجازی می شوند. ذخیره داده های نامربوط به عنوان حالت برای عملکرد بد است.

همه موارد را نمی توان با ژنراتور حل کرد. با این حال، می‌توانید الگوهای پیچیده قلاب را با ژنراتورها جایگزین کنید تا منطق را ساده‌تر کرده و آن را قابل کنترل‌تر و توسعه‌پذیرتر کند.

TL; DR

از ژنراتورها برای تولید داده ها به صورت پویا در اجزای React استفاده کنید. ژنراتورها می توانند منطق را ساده کرده و اتکا به قلاب ها را کاهش دهند.

من یک مثال ساده ارائه می کنم تا به شما در درک مکان و زمان استفاده از ژنراتورها کمک کند.

ژنراتورها چیست؟

ژنراتورها عملکردهایی هستند که می توان آنها را متوقف کرد و از سر گرفت. آنها با استفاده از a ایجاد می شوند 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
];

اکنون، نمی‌توانید به سادگی روی مجموعه‌ای از داده‌های استاتیک تکرار کنید. در عوض، باید هر عنوان را به صورت پویا محاسبه کنید.

اما شما ابرذهن هستید. شما به یک ایده رسیدید: چرا سه تابع ایجاد نکنید که هر قسمت از الگو را محاسبه کرده و از خروجی آنها به عنوان متن رندر استفاده کنید؟

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

};

به این ترتیب، می توانید اجزای خود را تمیز نگه دارید و منطق خود را ساده نگه دارید. از ژنراتورها می توان برای ساده کردن منطق و استراحت دادن به قلاب ها استفاده کرد.

مولدها همچنین منطق پشت چگونگی تولید داده ها را انتزاعی می کنند. بعلاوه، می‌توانید با افزودن توابع بیشتر به ژنراتور یا تغییر ترتیب توابع بدون تغییر منطق درون کامپوننت، الگو را به راحتی گسترش دهید.

برای برداشتن یک گام به جلو، می‌توانید یک قلاب سفارشی برای مدیریت منطق مولد ایجاد کنید.

import { useState } from "react";

function useGenerator(generator) {
    const [gen, setGen] = useState(generator());

    return () => gen.next().value;
}

const Headlines = () => {
    const pattern = useGenerator(patternGenerator);

    return (
        <div>
            <h1>{pattern()}h1>
        div>
    );
};

این همچنین تضمین می کند که API برای ژنراتور بدون توجه به اینکه منطق در داخل ژنراتور چگونه جابجا می شود، در بین اجزاء ثابت باقی می ماند.

از این رو، انعطاف‌پذیری و کنترل بیشتری بر فرآیند تولید داده‌ها فراهم می‌کنند.

مزایای استفاده از ژنراتورها:

1. منطق مؤلفه را با یک API سازگار و جداسازی نگرانی‌ها بین تولید و رندر کردن داده، ساده کنید.
2. برای به حداقل رساندن استفاده از حالت و جلوگیری از ذخیره سازی غیرضروری داده، تولید داده بر اساس تقاضا را فعال کنید.
3. ارائه کنترل دقیق و یک رویکرد انعطاف پذیر و قابل گسترش برای تولید داده.

نکاتی که باید به خاطر بسپارید

1. ژنراتورها انحصاری React نیستند بلکه یک ویژگی خالص جاوا اسکریپت هستند.
2. عملکرد مکث و از سرگیری ژنراتورها باعث می شود که آنها از نظر حافظه کارآمد باشند.
3. آنها عوارض جانبی ایجاد نمی کنند یا باعث بروز رسانی های نامنظم یا جهش نمی شوند.

حالا من در جای خوشحالم هستم!

نتیجه گیری

ژنراتورها به ساده‌سازی فرآیند ارائه داده‌ها کمک می‌کنند و نگرانی‌های بین تولید داده و اجزای رندر را از هم جدا می‌کنند و کنترل و انعطاف‌پذیری بیشتری بر روی تولید داده‌ها بدون به خطر انداختن عملکرد ارائه می‌دهند.

همچنین می‌توانید این سخنرانی عالی آنجانا وکیل درباره ژنراتورها را در جاوا اسکریپت بررسی کنید.

امیدوارم این مقاله به شما کمک کند تا بفهمید کجا و چه زمانی از ژنراتورها استفاده کنید. اگر سوال یا بازخوردی دارید، در صورت تمایل با من تماس بگیرید توییتر.

در اصل در وبلاگ ashishk1331 ارسال شده است.