Higher-Order component trong React là gì?

Higher-Order Component (HOC) trong React là một kỹ thuật nâng cao trong React để tái sử dụng logic component. Một HOC không phải là một phần của API React chính thức, mà là một mô hình phát sinh từ thành phần hợp thành của React. Nói một cách đơn giản, một HOC là một hàm nhận vào một component và trả về một component mới.

Đặc điểm của Higher-Order Component:

• Tái sử dụng code: HOC cho phép bạn tái sử dụng code, logic và bootstrap abstraction. HOC thường được sử dụng để chia sẻ logic giữa nhiều component, đặc biệt là khi logic đó không liên quan trực tiếp đến việc render UI.
• Chuyển đổi props: HOC có thể sửa đổi props trước khi chúng được truyền đến component được bọc. Điều này có thể bao gồm việc thêm props mới, chỉnh sửa props hiện tại hoặc loại bỏ những props không cần thiết.
• Abstract state: HOC có thể được sử dụng để quản lý state, và cung cấp các hành vi và thông tin liên quan đến state đó cho các component được bọc.

Cách hoạt động của Higher-Order Component:

Một HOC thường được định nghĩa như một hàm JavaScript thuần túy. Đây là một ví dụ về cách tạo một HOC:

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    componentDidMount() {
      // ... thêm logic đăng ký...
    }

    componentWillUnmount() {
      // ... thêm logic hủy đăng ký...
    }

    render() {
      // ... và render WrappedComponent với dữ liệu mới...
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

Trong ví dụ trên, withSubscription là một HOC nhận vào một WrappedComponent và một hàm selectData. Hàm này tạo ra một class component mới, quản lý việc đăng ký và hủy đăng ký đến một nguồn dữ liệu, và truyền dữ liệu đó như một prop đến WrappedComponent.

Lưu ý khi sử dụng Higher-Order Component:

• Không sử dụng HOC bên trong phương thức render: Điều này sẽ tạo ra một lượng lớn các component không cần thiết và có thể dẫn đến việc mất trạng thái và các vấn đề về hiệu suất.
• Chuyển tiếp refs: Nếu bạn cần truy cập đến instance của component được bọc, bạn cần chuyển tiếp refs bằng cách sử dụng React.forwardRef.

Tóm lại, Higher-Order Component là một mô hình mạnh mẽ trong React giúp bạn tạo ra các component có thể tái sử dụng, tách biệt logic không liên quan đến UI và chia sẻ logic đó giữa các component khác nhau.