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) {
   ...