Hướng dẫn về Lifecycle trong Class Component (ReactJS)

Trong bài viết này hãy cùng Dạy kèm IT tìm hiểu về Lifecycle trong Class Components nào.

Lifecycle là gì?

Một Lifecycle trong Class Component là một chu trình mà React sẽ thực hiện các phương thức của component theo đúng thứ tự khi component được tạo, cập nhật và xóa đi. Lifecycle cho phép chúng ta thực hiện các logic khác nhau tại từng thời điểm khác nhau trong quá trình render component.

Nếu bạn đang muốn theo đuổi ngành lập trình mà chưa biết bắt đầu từ đâu thì Dạy Kèm IT là sự lựa chọn tốt nhất dành cho bạn với các khóa học về lập trình 1:1 với Mentor với giá chỉ từ 3 triệu đồng trên tháng.

Liên hệ ngay qua SĐT: 0775.620.828

Phương thức Lifecycle chính

Trong Class Component, có 3 phương thức chính của Lifecycle là componentDidMount(), componentDidUpdate() và componentWillUnmount().

• componentDidMount() được gọi khi component được tạo và hiển thị trên giao diện. Đây là nơi thích hợp để thực hiện các request API hoặc khởi tạo các giá trị ban đầu cho component.
• componentDidUpdate() được gọi khi component đã được cập nhật và hiển thị lại trên giao diện. Đây là nơi thích hợp để thực hiện các thay đổi dựa trên prop mới hoặc state mới của component.
• componentWillUnmount() được gọi khi component sẽ bị xóa khỏi giao diện. Đây là nơi để dọn dẹp các tài nguyên không cần thiết hoặc huỷ các timer, request API chưa được hoàn thành.

Các phương thức khác

Ngoài 3 phương thức chính trên, Class Component còn có thêm các phương thức khác của Lifecycle như shouldComponentUpdate(), getSnapshotBeforeUpdate() và componentDidCatch(). Tuy nhiên, chúng ta ít sử dụng các phương thức này trong thực tế và nên tìm hiểu thêm về chúng khi cần thiết.

Cách sử dụng

Để sử dụng các phương thức Lifecycle trong Class Component, ta cần định nghĩa các phương thức này trong class và thực hiện các logic cần thiết trong đó. Ví dụ:

class LifecycleComponent extends React.Component {
  componentDidMount() {
    // Thực hiện các request API hoặc khởi tạo các giá trị ban đầu
    console.log("Component đã được mount lên giao diện");
  }

  componentDidUpdate(prevProps) {
    // Thực hiện các thay đổi dựa trên prop mới hoặc state mới
    if (this.props.number !== prevProps.number) {
      console.log("Số lượng items đã thay đổi");
    }
  }

  componentWillUnmount() {
    // Dọn dẹp các tài nguyên không cần thiết hoặc huỷ các timer, request API chưa hoàn thành
    console.log("Component sẽ bị xóa khỏi giao diện");
  }

  render() {
    return <div>Lifecycle Component</div>;
  }
}
<div class="copied" data-code="class LifecycleComponent extends React.Component {
  componentDidMount() {
    // Thực hiện các request API hoặc khởi tạo các giá trị ban đầu
    console.log("Component đã được mount lên giao diện");
  }

  componentDidUpdate(prevProps) {
    // Thực hiện các thay đổi dựa trên prop mới hoặc state mới
    if (this.props.number !== prevProps.number) {
      console.log("Số lượng items đã thay đổi");
    }
  }

  componentWillUnmount() {
    // Dọn dẹp các tài nguyên không cần thiết hoặc huỷ các timer, request API chưa hoàn thành
    console.log("Component sẽ bị xóa khỏi giao diện");
  }

  render() {
    return 
Lifecycle Component
;
  }
}
">