Lifecycle

Lifecycle (Vòng đời) của Component trong React (Trước và sau phiên bản 16.3)

Trước phiên bản React 16.3:

Vòng đời của component React trước phiên bản 16.3 bao gồm các phương thức sau:

1. Initializing (Khởi tạo):

• constructor(props): Khởi tạo state và props cho component.

2. Mounting (Lắp đặt):

• componentWillMount(): Được gọi trước khi component được render lần đầu tiên.

• componentDidMount(): Được gọi sau khi component được render lần đầu tiên.

3. Updating (Cập nhật):

• componentWillUpdate(nextProps, nextState): Được gọi trước khi component được render lại do state hoặc props thay đổi.

• shouldComponentUpdate(nextProps, nextState): Xác định xem component có cần được render lại hay không.

• componentDidUpdate(prevProps, prevState): Được gọi sau khi component được render lại.

4. Unmounting (Gỡ cài đặt):

• componentWillUnmount(): Được gọi trước khi component bị gỡ khỏi DOM.

Sử dụng:

• Các phương thức componentWillMount(), componentDidMount(), componentWillUnmount() thường được sử dụng để thực hiện các tác vụ như:

  • Kết nối với API

  • Thiết lập sự kiện

  • Khởi tạo timer

• Các phương thức componentWillUpdate(), shouldComponentUpdate(), componentDidUpdate() thường được sử dụng để tối ưu hóa hiệu suất render bằng cách:

  • Kiểm tra xem component có cần được render lại hay không

  • Cập nhật state hoặc props của component

Lưu ý:

• Trình tự gọi các phương thức lifecycle được cố định.

• Các phương thức lifecycle có thể bị null hoặc không được sử dụng.

Sau phiên bản React 16.3:

Giới thiệu các phương thức lifecycle mới:

• static getDerivedStateFromProps(nextProps, prevState): Cập nhật state dựa trên props mới.

• getSnapshotBeforeUpdate(prevProps, prevState): Chụp ảnh nhanh của DOM trước khi render lại.

Thay đổi:

• Các phương thức componentWillMount(), componentWillUnmount() đã bị loại bỏ.

• Các phương thức componentWillUpdate(), componentDidUpdate() được thay thế bởi getSnapshotBeforeUpdate(), componentDidUpdate().

• Giới thiệu hook useEffect() để thay thế cho một số trường hợp sử dụng của các phương thức lifecycle cũ.

Sử dụng:

• Hook useEffect() được sử dụng để thực hiện các tác vụ phụ thuộc vào lifecycle như:

  • Kết nối với API

  • Thiết lập sự kiện

  • Khởi tạo timer

  • Dọn dẹp tài nguyên

• Các phương thức lifecycle mới ít được sử dụng hơn so với các phương thức lifecycle cũ.

Lợi ích:

• Việc sử dụng hook useEffect() giúp code dễ đọc và dễ bảo trì hơn.

• Cải thiện hiệu suất render do hook useEffect() chỉ được gọi khi cần thiết.

So sánh lifecycle cũ và mới:

Phương thức Lifecycle	Phiên bản React	Sử dụng
constructor(props)	Tất cả	Khởi tạo state và props
componentWillMount()	< 16.3	Thực hiện các tác vụ trước khi render
componentDidMount()	Tất cả	Thực hiện các tác vụ sau khi render
componentWillUpdate(nextProps, nextState)	< 16.3	Kiểm tra trước khi render lại
shouldComponentUpdate(nextProps, nextState)	< 16.3	Tối ưu hóa hiệu suất render
componentDidUpdate(prevProps, prevState)	Tất cả	Thực hiện các tác vụ sau khi render lại
componentWillUnmount()	< 16.3	Dọn dẹp tài nguyên trước khi gỡ cài đặt
static getDerivedStateFromProps(nextProps, prevState)	>= 16.3	Cập nhật state dựa trên props mới
getSnapshotBeforeUpdate(prevProps, prevState)	>= 16.3	Chụp ảnh nhanh của DOM trước khi render lại
useEffect()	>= 16.3	Thay thế cho một số trường hợp sử dụng lifecycle cũ

drive_spreadsheetXuất sang Trang tính

Kết luận:

Vòng đời của component React đã thay đổi đáng kể sau phiên bản 16.3. Việc sử dụng hook useEffect() và các phương thức lifecycle mới giúp code dễ đọc, dễ bảo trì và cải thiện