Khám Phá Sức Mạnh Của Generator Trong React

Bạn có lạm dụng hook trong React? Hãy thử sử dụng generator để tạo dữ liệu động trong component, giúp đơn giản hóa logic và giảm thiểu sự phụ thuộc vào hook. Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu cách thức hoạt động của generator và cách ứng dụng chúng trong React.

Generator Là Gì?

Generator là các hàm đặc biệt có khả năng tạm dừng và tiếp tục lại, được tạo ra bằng cú pháp function* và biểu thức yield. Chúng cho phép bạn lặp qua và tạo ra một chuỗi dữ liệu một cách dễ dàng. Dưới đây là một ví dụ đơn giản về một generator:

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 }

Bạn có thể sử dụng generator để lặp qua một tập hợp dữ liệu hoặc tạo ra nội dung hiển thị trong các component.

Ví Dụ Cụ Thể

Giả sử bạn có một danh sách các tiêu đề mà bạn muốn hiển thị trong component của mình:

const headlines = [
    "Cửa Hàng Địa Phương Phát Triển",
    "Đội Tuyển Chiến Thắng Trận Chung Kết",
    "Giữ Bản Thân Không Bị Cúm",
    "Ra Mắt Điện Thoại Mới",
    "Tuần Nắng Ấm Tới"
];

Bạn có thể hiển thị các tiêu đề này bằng cách sử dụng state để theo dõi chỉ mục hiện tại:

import { useState } from "react";

const Headlines = () => {
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{headlines[index]}</h1>
            <button onClick={() => setIndex((index + 1) % headlines.length)}>
                Tiếp
            </button>
        </div>
    );
};

Tuy nhiên, khi phải hiển thị các tiêu đề động tuỳ theo điều kiện như thời gian trong ngày hoặc tình hình hiện tại, bạn sẽ cần một giải pháp linh hoạt hơn.

Cách Sử Dụng Các Hàm Động

Thay vì sử dụng các data tĩnh, bạn có thể tạo ra các hàm để tính toán giá trị dựa trên điều kiện:

function getGreetingMessage() {
    const hours = new Date().getHours();
    if (hours < 12) return "Chào Buổi Sáng";
    else if (hours < 18) return "Chào Buổi Chiều";
    else return "Chào Buổi Tối";
}

function getDayOfTheWeek() {
    const days = ["Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy"];
    return `Hôm Nay Là ${days[new Date().getDay()]}`;
}

function getMotivationalThought() {
    const thoughts = ["Luôn Tích Cực", "Tiếp Tục Đi Tới", "Bạn Tuyệt Vời" ];
    return thoughts[Math.floor(Math.random() * thoughts.length)];
}

Bây giờ, bạn có thể hiển thị các giá trị từ các hàm này trong component:

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)}>
                Tiếp
            </button>
        </div>
    );
};

Sử Dụng Generator Để Tối Ưu Hóa Component

Để đơn giản hóa logic trong component của bạn, bạn có thể sử dụng generator:

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

const pattern = patternGenerator();

Sau đó, bạn có thể sử dụng generator để lấy giá trị tiêu đề:

const Headlines = () => {
    const [index, setIndex] = useState(0);

    return (
        <div>
            <h1>{pattern.next().value}</h1>
            <button onClick={() => setIndex((index + 1) % 3)}>Tiếp</button>
        </div>
    );
};

Bằng cách này, bạn có thể giữ cho logic trong component gọn gàng và đơn giản, cũng như dễ dàng mở rộng mẫu tiêu đề của mình.

Tạo Hook Tùy Chỉnh Cho Generator

Bạn thậm chí có thể tạo một custom hook để quản lý logic generator, giúp cho mã nguồn dễ hiểu và bảo trì hơn:

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

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

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

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

Lợi Ích Của Việc Sử Dụng Generator

• Đơn giản hóa logic component: Tách biệt giữa việc tạo dữ liệu và render, giúp mã nguồn rõ ràng hơn.
• Tạo dữ liệu theo yêu cầu: Giảm thiểu việc sử dụng state và tránh theo dõi các dữ liệu không cần thiết.
• Kiểm soát tốt hơn: Cung cấp tính linh hoạt và sự mở rộng dễ dàng trong việc tạo dữ liệu.

Những Điều Cần Lưu Ý

• Generator là một tính năng JavaScript, không chỉ riêng cho React.
• Tính năng tạm dừng và tiếp tục cũng giúp tiết kiệm bộ nhớ.
• Generator không gây ra các tác động phụ và không kích hoạt các cập nhật không cần thiết.

Kết Luận

Việc sử dụng generator trong React không chỉ giúp đơn giản hóa quy trình tạo dữ liệu mà còn tách biệt rõ ràng giữa logic dữ liệu và giao diện hiển thị, từ đó mang lại hiệu suất tốt hơn và tăng cường khả năng kiểm soát cho developer.
source: viblo