HOCs Pattern là gì? Hướng dẫn triển khai Hocs Pattern trong dự án React

Trong thế giới phát triển ứng dụng với React, bạn chắc hẳn đã nghe đến khái niệm Higher-Order Components (HOCs) – một công cụ rất mạnh mẽ giúp tái sử dụng logic giữa các component. Ngày hôm nay, chúng ta sẽ cùng nhau tìm hiểu chi tiết về HOCs, từ khái niệm cơ bản đến cách triển khai và những lưu ý cần biết khi sử dụng.

1. Higher-Order Components (HOCs) Là Gì?

Table of Contents

Higher-Order Components (HOCs) là một kỹ thuật trong React cho phép bạn tái sử dụng logic giữa các component. HOCs không phải là một phần của API chính thức trong React, mà là một mẫu thiết kế phát sinh từ cách mà React hoạt động.

Hiểu một cách đơn giản, HOC là một hàm nhận vào một component và trả về một component mới, có chức năng bổ sung. Điều này có nghĩa là bạn có thể “nâng cấp” một component mà không cần viết lại mã nguồn. Ví dụ, nếu bạn có nhiều component cần kết nối với một API, bạn có thể tạo ra một HOC để xử lý logic lấy dữ liệu từ API này.

HOC Pattern trong React

// HOC để lấy dữ liệu từ API
function withDataFetching(WrappedComponent, dataSource) {
    return class extends React.Component {
        state = {
            data: [],
            isLoading: true,
            error: null,
        };

        componentDidMount() {
            fetch(dataSource)
                .then(response => response.json())
                .then(data => this.setState({ data, isLoading: false }))
                .catch(error => this.setState({ error, isLoading: false }));
        }

        render() {
            return (
                <WrappedComponent
                    {...this.props}
                    data={this.state.data}
                    isLoading={this.state.isLoading}
                    error={this.state.error}
                />
            );
        }
    };
}

function UserList(props) {
    const { data, isLoading, error } = props;
    if (isLoading) return <div>Đang tải...</div>;
    if (error) return <div>Lỗi: {error.message}</div>;
    return (
        <ul>
            {data.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    );
}

// Sử dụng HOC để tạo ra một component mới với dữ liệu
const UserListWithData = withDataFetching(UserList, 'https://api.example.com/users');

2. Tại Sao Nên Sử Dụng HOCs?

Sử dụng HOCs trong phát triển ứng dụng mang lại nhiều lợi ích:

Tái Sử Dụng Logic: HOCs cho phép bạn tách rời logic khỏi component, giúp dễ dàng tái sử dụng. Thay vì viết lại mã trong nhiều component, bạn chỉ cần viết một lần trong HOC.
Giảm Thiểu Code Nhân Đôi: Điều này giúp code của bạn trở nên sạch sẽ hơn và dễ bảo trì. Việc lặp lại logic có thể dẫn đến lỗi không mong muốn.
Khả Năng Tích Hợp: Bạn có thể kết hợp nhiều HOCs để tạo ra các component phong phú về tính năng.

Ví dụ, nếu bạn muốn tạo nhiều văn bản với fontSize lớn và kiểu chữ đậm, bạn có thể tạo hai HOCs, withLargeFontSize và withBoldFontWeight, để dễ dàng áp dụng.

3. Cách Triển Khai HOCs

Để tạo một HOC, bạn cần thực hiện theo các bước sau:

Nhận Một Component Làm Tham Số: HOCs là một hàm nhận vào một component như một tham số.
Áp Dụng Logic Bổ Sung: Trong HOCs, bạn thêm logic mà bạn muốn tái sử dụng.
Trả Về Component Mới: HOCs trả về component mới với các tính năng được cải thiện.

Dưới đây là một ví dụ về HOC withStyles:

export function withStyles(Component) {
    return (props) => {
        const style = {
            color: "red",
            fontSize: "1em",
            ...props.style,
        };
        return <Component {...props} style={style} />;
    };
}

Khi sử dụng HOC withStyles, bạn có thể bọc một component đơn giản như sau:

import { withStyles } from "./hoc/withStyles";

const Text = () => <p style={{ fontFamily: "Inter" }}>Hello world!</p>;
const StyledText = withStyles(Text);

4. Những Điểm Cần Lưu Ý Khi Sử Dụng HOCs

4.1 Xung Đột Tên (Naming Collisions)

Khi sử dụng HOCs, bạn có thể gặp phải vấn đề xung đột tên giữa các props của HOCs và component gốc. Ví dụ, nếu HOC của bạn thêm một prop có tên style, nó có thể ghi đè lên prop style của component gốc. Để tránh điều này, bạn cần chú ý khi phối hợp các props.

function withStyles(Component) {
    return (props) => {
        const style = {
            padding: "0.2rem",
            margin: "1rem",
            ...props.style,
        };
        return <Component {...props} style={style} />;
    };
}

const Button = () => <button style={{ color: "red" }}>Click me!</button>;
const StyledButton = withStyles(Button);

4.2 Đọc Hiểu Code (Readability)

Sử dụng nhiều HOCs lồng nhau có thể làm cho code trở nên khó đọc và khó debug. Để giải quyết vấn đề này, hãy:

Đặt Tên Rõ Ràng: Hãy đảm bảo tên của HOCs và biến của bạn là rõ ràng để dễ theo dõi.
Sử Dụng Thư Viện: Các thư viện như recompose có thể giúp quản lý HOCs hiệu quả hơn.
Cân Nhắc Sử Dụng Hooks: Trong một số trường hợp, Hooks hoặc Render Props có thể là sự thay thế tốt hơn.

5. Khi Nào Nên Sử Dụng HOCs?

Khi bạn cần thêm logic chung cho nhiều component khác nhau.
Khi logic không phù hợp để đặt trong component cơ bản.
Khi bạn muốn giữ cho component cơ bản đơn giản và sạch sẽ.
Khi bạn cần tái sử dụng logic mà không muốn thay đổi cấu trúc component hiện có.

6. Kết Luận

HOCs là một công cụ mạnh mẽ và linh hoạt trong React, giúp bạn dễ dàng tái sử dụng logic giữa các component mà không phải viết lại mã nguồn. Dù mang lại nhiều lợi ích, sử dụng HOCs cũng cần có những cân nhắc riêng, như xung đột props và tính phức tạp trong cấu trúc code.

Hy vọng bài viết đã giúp bạn nắm rõ hơn về Higher-Order Components và cách áp dụng chúng trong dự án của mình. Nếu bạn muốn tìm hiểu thêm về các khái niệm khác trong React và marketing, hãy ghé thăm website comdy.vn để cập nhật những kiến thức mới nhất!

blog