HOC && HOL

HOC (Higher-Order Component) và HOL (Higher-Order Function)

HOC (Higher-Order Component) là một kỹ thuật trong lập trình React để tái sử dụng logic component bằng cách bao bọc một component hiện có trong một component mới. Component mới này sẽ mở rộng chức năng của component hiện có bằng cách thêm logic bổ sung hoặc thay đổi cách component tương tác với DOM.

Ví dụ:

Giả sử bạn muốn tạo một component Button có thể ghi log mỗi khi được click. Bạn có thể viết một HOC withLogging để bao bọc component Button như sau:

const withLogging = (WrappedComponent) => {
  const handleClick = (event) => {
    console.log('Button clicked!');
    // Gọi hàm click mặc định của component Button
    WrappedComponent.handleClick(event);
  };

  return React.createElement(WrappedComponent, { ...props, handleClick });
};

const MyButton = (props) => {
  return (
    <button onClick={props.handleClick}>Click me!</button>
  );
};

const LoggingButton = withLogging(MyButton);

Lợi ích của HOC:

• Tái sử dụng logic: HOC giúp bạn tái sử dụng logic component giữa các component khác nhau.

• Tách biệt mối quan tâm: HOC giúp bạn tách biệt logic component khỏi logic render.

• Giảm boilerplate: HOC giúp bạn giảm thiểu code boilerplate, viết code ngắn gọn và dễ đọc hơn.

Ví dụ về HOC khác:

• withData - Dùng để lấy dữ liệu từ API và truyền vào component con.

• withTheme - Dùng để áp dụng theme cho component con.

• withErrorBoundary - Dùng để xử lý lỗi trong component con.

HOL (Higher-Order Function) là một hàm trả về một hàm khác. HOL thường được sử dụng trong lập trình JavaScript để tái sử dụng logic hàm bằng cách truyền chức năng vào hàm.

Ví dụ:

Giả sử bạn muốn tạo một hàm compose để sắp xếp các hàm khác nhau. Hàm compose sẽ nhận hai hàm f và g và trả về một hàm mới h có chức năng tương đương với việc gọi f(g(x)) cho một giá trị x bất kỳ.

const compose = (f, g) => (x) => f(g(x));

const addOne = (x) => x + 1;
const double = (x) => x * 2;

const addOneAndDouble = compose(double, addOne);
console.log(addOneAndDouble(5)); // Output: 12

Lợi ích của HOL:

• Tái sử dụng logic: HOL giúp bạn tái sử dụng logic hàm giữa các hàm khác nhau.

• Tăng tính linh hoạt: HOL giúp bạn tạo ra các hàm mới từ các hàm hiện có một cách linh hoạt.

• Giảm boilerplate: HOL giúp bạn giảm thiểu code boilerplate, viết code ngắn gọn và dễ đọc hơn.

So sánh HOC và HOL:

Đặc điểm	HOC	HOL
Định nghĩa	Hàm trả về một component	Hàm trả về một hàm
Sử dụng	Tái sử dụng logic component	Tái sử dụng logic hàm
Lợi ích	Tái sử dụng logic, tách biệt mối quan tâm, giảm boilerplate	Tái sử dụng logic, tăng tính linh hoạt, giảm boilerplate
Ví dụ	withLogging, withData, withTheme	compose, curry

Kết luận:

HOC và HOL là hai kỹ thuật mạnh mẽ trong lập trình React và JavaScript giúp bạn viết code dễ dàng, hiệu quả và tái sử dụng được. Việc sử dụng HOC và HOL hợp lý sẽ giúp bạn tổ chức code tốt hơn, giảm thiểu code boilerplate và cải thiện hiệu suất ứng dụng.