Sự khác nhau giữa class component và functional component trong Reactjs là gì?

Trong React, có hai loại chính để xây dựng components: class components và functional components. Mỗi loại có đặc điểm và cách sử dụng riêng.

Class Components

• Định nghĩa: Class components được định nghĩa bằng cách sử dụng ES6 classes. Chúng thường được sử dụng khi cần trạng thái (state) hoặc các phương thức lifecycle.
• Trạng thái và Lifecycle: Class components cho phép bạn sử dụng các phương thức lifecycle như componentDidMount, componentDidUpdate, và componentWillUnmount. Chúng cũng cho phép sử dụng this.state và this.setState để quản lý trạng thái.
• Cú pháp:
  jsx Copy

  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = { /* initial state */ };
    }
  
    componentDidMount() {
      // Lifecycle method
    }
  
    render() {
      return <div>{/* content */}</div>;
    }
  }

• Binding this: Trong class components, bạn cần chú ý đến việc binding this khi truyền phương thức của component như một callback.

Functional Components

• Định nghĩa: Functional components được định nghĩa bằng cách sử dụng các hàm JavaScript thông thường. Trước đây, chúng thường được sử dụng cho các components không có trạng thái (stateless) hoặc không cần sử dụng đến lifecycle methods.
• Hooks: Với sự giới thiệu của Hooks trong React 16.8, functional components nay có thể sử dụng trạng thái và các tính năng khác của React thông qua useState, useEffect, và các hooks khác.
• Cú pháp:
  jsx Copy

  function MyComponent(props) {
    const [state, setState] = React.useState(initialState);
  
    React.useEffect(() => {
      // Side effects or lifecycle behavior
    });
  
    return <div>{/* content */}</div>;
  }

• Simplicity và Performance: Functional components thường đơn giản hơn và có thể có hiệu suất tốt hơn do không có overhead của các phương thức lifecycle mà class components mang lại.

Sự Khác Biệt Chính

• Cú pháp và Định nghĩa: Class components sử dụng cú pháp ES6 class và cần kế thừa từ React.Component, trong khi functional components là các hàm JavaScript đơn giản.
• Trạng thái và Lifecycle: Trước khi có Hooks, chỉ class components mới có thể sử dụng trạng thái và lifecycle methods. Giờ đây, functional components cũng có thể sử dụng các tính năng này thông qua hooks.
• this Binding: Chỉ class components mới cần quan tâm đến việc binding this, trong khi functional components không cần và thường dễ quản lý hơn.

Kết luận

Class components và functional components đều có thể sử dụng để xây dựng UI trong React, nhưng với sự ra đời của Hooks, functional components trở nên mạnh mẽ hơn và được khuyến khích sử dụng do tính đơn giản và khả năng tái sử dụng mã cao. Class components vẫn còn hữu ích trong một số trường hợp, nhưng xu hướng hiện nay là chuyển dần sang sử dụng functional components.