Bí mật đằng sau sức mạnh của Generator trong React

0 0 0

Người đăng: Thái Thịnh

Theo Viblo Asia

Bạn đang lạm dụng hook? Hãy sử dụng generator để tạo dữ liệu động trong component React, đơn giản hóa logic và giảm sự phụ thuộc vào hook. Hãy cùng tìm hiểu kỹ hơn ngay sau đây!

Generator là gì?

Generator là các hàm có thể tạm dừng và tiếp tục lại. Chúng được tạo bằng cách sử dụng khai báo function* và biểu thức 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 }

Bạn có thể sử dụng chúng để lặp qua một tập hợp dữ liệu hoặc để tạo một chuỗi dữ liệu. Chuỗi dữ liệu này sau đó có thể được sử dụng để render nội dung bên trong các component.

Vẫn còn bối rối? Hãy cùng xây dựng một ví dụ đơn giản để hiểu cách sử dụng generator.

Ví dụ về Tiêu đề

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

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

Bạn có thể làm điều đó bằng cách lặp qua mảng headlines và render từng tiêu đề bên trong component, thông qua việc lưu trữ chỉ mục dưới dạng một biến state.

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

Điều này hoạt động tốt cho đến khi bạn có một mảng tiêu đề tuyến tính mà bạn muốn lặp lại và hiển thị lặp đi lặp lại. Bây giờ, nếu bạn muốn tạo một mẫu với các tiêu đề của mình thì sao? Ví dụ: đầu tiên, hiển thị thông báo chào mừng dựa trên thời gian trong ngày, sau đó hiển thị ngày trong tuần và cuối cùng là một suy nghĩ tạo động lực ngẫu nhiên.

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

Bây giờ, bạn không thể chỉ đơn giản lặp lại một tập hợp dữ liệu tĩnh. Thay vào đó, bạn cần tính toán từng tiêu đề một cách linh hoạt.

Nhưng bạn là một người có đầu óc nhạy bén. Bạn nảy ra một ý tưởng: tại sao không tạo ba hàm tính toán từng phần của mẫu và sử dụng kết quả đầu ra của chúng làm văn bản render?

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

Bây giờ, bạn có thể sử dụng các hàm này để render các tiêu đề bên trong component.

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

Bạn có nhận thấy điều gì không? Bạn đã thay đổi toàn bộ logic của component. Để đơn giản hóa logic và giữ cho component của bạn gọn gàng, bạn có thể sử dụng generator.

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

Bây giờ, bạn có thể sử dụng generator này để render các tiêu đề bên trong component.

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

Bằng cách này, bạn có thể giữ cho component của mình gọn gàng và logic đơn giản. Generator có thể được sử dụng để đơn giản hóa logic và cho hook nghỉ ngơi. Generator cũng trừu tượng hóa logic đằng sau cách dữ liệu được tạo ra.

Thêm vào đó, bạn có thể dễ dàng mở rộng mẫu bằng cách thêm nhiều hàm vào generator hoặc thay đổi thứ tự của các hàm mà không làm thay đổi logic bên trong component. Để tiến thêm một bước nữa, bạn cũng có thể tạo một custom hook để xử lý logic generator.

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

Điều này cũng đảm bảo rằng API cho generator vẫn nhất quán trên các component bất kể logic thay đổi như thế nào bên trong generator. Do đó, chúng cung cấp tính linh hoạt và kiểm soát nhiều hơn đối với quá trình tạo dữ liệu.

Lợi ích của việc sử dụng generator

  • Đơn giản hóa logic component với API nhất quán và tách biệt giữa việc tạo dữ liệu và render.
  • Cho phép tạo dữ liệu theo yêu cầu để giảm thiểu việc sử dụng state và tránh lưu trữ dữ liệu không cần thiết.
  • Cung cấp kiểm soát chi tiết và cách tiếp cận linh hoạt, có thể mở rộng để tạo dữ liệu.

Những điểm cần ghi nhớ

  • Generator không dành riêng cho React mà là một tính năng JavaScript thuần túy.
  • Chức năng tạm dừng và tiếp tục của generator giúp chúng tiết kiệm bộ nhớ.
  • Chúng không tạo ra các hiệu ứng phụ hoặc kích hoạt các cập nhật hoặc đột biến bất thường.

Kết luận

Generator giúp hợp lý hóa quy trình phân phối dữ liệu và tách biệt giữa việc tạo dữ liệu và render component, mang lại khả năng kiểm soát và tính linh hoạt cao hơn đối với việc tạo dữ liệu mà không ảnh hưởng đến hiệu suất.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Tìm hiểu về Redux Thunk

Chào mọi người, nếu bạn là người đã biết về React và đang làm quen với Redux chắc hẳn bạn đang rất mơ hồ về các khái niệm cơ bản của Redux như dispatch, store, action creator,... bạn còn đang vật lộn với đống document của Redux để hiểu những khái niệm đó và bạn nghe ai đó trong team nói về Redux Thu

0 0 401

- vừa được xem lúc

[React] Giới thiệu tổng quát về Redux Toolkit

1. Redux Toolkit (RTK) là gì và tại sao lại có nó. . .

0 0 6.6k

- vừa được xem lúc

Uống Pepsi code Vue đi - Uống Cocacola code React nha ;)

. (Nguồn ảnh: Internet). Chào các bạn, chào các bạn. Let's go . 1.

0 0 149

- vừa được xem lúc

Cài đặt taillwind css cho dự án React

Trong bài viết cùng mình tìm hiểu cách cài đặt tailwind css cho một dự án React sẵn có. .

0 0 148

- vừa được xem lúc

Formik vs React Hook Form (Phần 1)

Các lập trình viên Front End đều làm việc rất nhiều với form cùng sự phức tạp của ứng dụng. Do vậy chúng ta cần những thư viện form mạnh mẽ hỗ trợ quản lý các form state, form validation... Thành phần module. Formik bao gồm có 9 dependencies khác. . React Hook Form thì không có.

0 0 373

- vừa được xem lúc

Hướng dẫn React Redux cho người mới bắt đầu - Phần 1

Lời mởi đầu. Chào các bạn, ở thời điểm thực hiện bài viết này mình cũng là một người đang bắt đầu tìm hiểu và học với ReactJs và Redux, trong quá trình tìm hiểu đọc các tài liệu về thư viện này mình có tìm được một bài hướng dẫn khá hay nên đã quyết định chia sẻ với mọi người .

0 0 283