Tại sao có Higher Order Component (HOC) khi đã có Decorator pattern ?

Trong TypeScript, có hai khái niệm quan trọng khi nói đến việc mở rộng chức năng của một component: Decorator và Higher Order Component (HOC).

1. Decorator trong TypeScript:

Decorators là một tính năng phổ biến của TypeScript, được sử dụng để thêm metadata cho một class, một biến hoặc một property.
Trong React, Decorators có thể sử dụng để mở rộng chức năng của một component, chẳng hạn như thêm event handler, thêm style hoặc thêm prop.
Sử dụng Decorators rất dễ dàng trong TypeScript. Chúng ta chỉ cần khai báo một hàm và truyền nó vào decorator function. Ví dụ:


function withStyle(WrappedComponent: React.ComponentType, style: object) {
  return (props) => {
    const styled = { style };
    return (
      <div {...props} {...styled}>
        <WrappedComponent {...props} />
      </div>
    );
  };
}

@withStyle({ backgroundColor: 'lightblue' })
class MyComponent extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

Trong ví dụ trên, một decorator function withStyle được khai báo với WrappedComponent và style. Nó trả về một hàm mới với props của component gốc và các style được thêm vào. Decorator được sử dụng bằng cách thêm @withStyle() trước class MyComponent.

2. Higher Order Component (HOC) trong TypeScript:

Higher Order Component là một kỹ thuật cũng được sử dụng để mở rộng chức năng của một component trong React.
HOC được implement bằng cách truyền một component vào một hàm, và hàm sẽ trả về một component mới với các props mới được thêm vào.
Sử dụng HOC trong TypeScript cũng rất đơn giản. Chúng ta chỉ cần khai báo một hàm và truyền component vào. Ví dụ:


function withStyle(WrappedComponent: React.ComponentType, style: object) {
  return class extends React.Component {
    render() {
      const styled = { style };
      return (
        <div {...this.props} {...styled}>
          <WrappedComponent {...this.props} />
        </div>
      );
    }
  };
}

const MyComponentWithStyle = withStyle(MyComponent, { backgroundColor: 'lightblue' });

Đoạn code trên sẽ tạo ra một HOC với MyComponent là WrappedComponent, và style được truyền vào. Component mới được tạo ra và gán vào MyComponentWithStyle.

3. Sự khác nhau giữa Decorator và Higher Order Component :

Cú pháp: Decorator sử dụng cú pháp gắn trực tiếp trước class component, trong khi HOC sử dụng hàm để bọc class component.
Phiên bản hỗ trợ: Decorator hiện chỉ hỗ trợ trong phiên bản TypeScript từ 3.0 trở đi, trong khi HOC có thể được sử dụng trong bất kỳ phiên bản TypeScript nào.
Scope: Decorator chỉ ảnh hưởng đến class component đó, trong khi HOC có thể ảnh hưởng đến nhiều component khác nhau.

4. Khi nào nên dùng:

Khi cần mở rộng chức năng của một component duy nhất: Trong trường hợp này, Decorator có thể là giải pháp tốt hơn do nó chỉ ảnh hưởng đến component được trang trí và không ảnh hưởng đến các component khác.
Khi cần sử dụng chung chức năng giữa các component khác nhau: Trong trường hợp này, HOC có thể là giải pháp tốt hơn do nó có thể được sử dụng lại trên nhiều component khác nhau và có thể dễ dàng được customization cho từng component.

Tuy nhiên, nếu lập trình viên muốn sử dụng cả hai kỹ thuật này trong một project, thì Decorator có thể được sử dụng để mở rộng chức năng của một component đơn lẻ và HOC có thể được sử dụng để chia sẻ chức năng giữa các component khác nhau.

Tóm lại, sự khác nhau giữa Decorator và Higher Order Component còn tùy thuộc vào công dụng và nhu cầu của từng dự án. Lập trình viên cần phải thận trọng trong việc lựa chọn kỹ thuật phù hợp để tránh gây khó khăn trong việc bảo trì và phát triển phần mềm.