Sự khác biệt giữa Function Component và Class Component trong React

Về mặt cú pháp:

• Function Component:

  • Được viết như một hàm JavaScript đơn giản.

  • Nhận props như đối số và trả về một phần tử React.

  • Ký tự viết tắt: SFC (Stateless Function Component).

• Class Component:

  • Kế thừa từ lớp React.Component.

  • Cấu trúc bao gồm:

    • Constructor để khởi tạo state.

    • Phương thức render để trả về phần tử React.

    • Các lifecycle methods để quản lý vòng đời của component.

Về tính năng:

• Function Component:

  • Đơn giản, dễ viết: Phù hợp cho các component đơn giản, không cần state phức tạp.

  • Mã ngắn gọn, dễ đọc: Giúp tăng tính bảo trì và khả năng cộng tác.

  • Sử dụng Hooks: Tận dụng các hook như useState, useEffect để quản lý state và logic.

• Class Component:

  • Phức tạp hơn: Phù hợp cho các component cần state và logic phức tạp.

  • Cấu trúc rườm rà: Khó quản lý và bảo trì cho component lớn.

  • Lifecycle methods: Cung cấp nhiều phương thức để quản lý vòng đời component.

Ví dụ:

// Function Component
const MyComponent = (props) => {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
};

// Class Component
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Tăng
        </button>
      </div>
    );
  }
}

Lựa chọn sử dụng:

• Function Component: Nên sử dụng cho:

  • Component đơn giản, không state.

  • Ưu tiên mã ngắn gọn, dễ đọc.

  • Dễ dàng sử dụng Hooks.

• Class Component: Nên sử dụng cho:

  • Component cần state và logic phức tạp.

  • Cần sử dụng lifecycle methods.

Kết luận:

Cả Function Component và Class Component đều đóng vai trò quan trọng trong React. Việc lựa chọn sử dụng loại nào phụ thuộc vào nhu cầu cụ thể của từng component.

Ngoài những điểm khác biệt chính nêu trên, còn có một số điểm khác biệt khác như:

• Hiệu suất: Function Component thường có hiệu suất tốt hơn Class Component do cấu trúc đơn giản và không sử dụng lifecycle methods.

• Kiểm thử: Function Component dễ dàng viết test hơn Class Component do không có state và logic phức tạp.

Hy vọng những thông tin này hữu ích cho bạn!