Component Lifecycle in ReactJs

Nó là gì?

• Là vòng đời của 1 component
• Tập hợp những hàm mà react lib đã dựng sẵn

Nó được định nghĩa như thế nào?

Với Component trong React, Lifecycle gồm 3 giai đoạn:

• Mounting: Hiểu đơn giản là thêm vào DOM, hiển thị lên giao diện người dùng
• Updating: Quá trình xử lí
• Unmouting: Hiểu đơn giản là bỏ ra khỏi DOM, ẩn khỏi giao diện người dùng

Mounting

• render()

1. Luôn có trong 1 component
2. Trả về body là 1 thẻ div bao gồm thông tin của component (JSX language)
3. Luôn được gọi khi có thay đổi

• componentWillMount()

1. Được gọi trước khi render()
2. Từ props để tính toán state

• componentDidMount()

1. Gọi ngay sau hàm render()
2. Có thể tương tác giao diện người dùng(setState)

Có thể xem console trong ảnh sau để trực quan hơn(không quan trọng thứ tự các hàm được định nghĩa)

Updating

Các hàm update dành cho state

• shouldComponentUpdate()

1. Được gọi trước render()
2. Return true/false, mặc định là false. Luôn chạy khi update state, trạng thái để xác định có nên update hay không.

• componentWillUpdate()

1. Được gọi sau shouldComponentUpdate()
2. Không được gọi setState() trong nó
3. Chạy ngay trước render()

• componentDidUpdate()

1. Thao tác UI

Có thể xem console trong ảnh sau để trực quan hơn(Nhấn CLICK button để thực hiện update state):

Các hàm update dành cho props

• componentWillReceiveProps()

1. Hàm chạy khi component nhận được sự thay đổi của props truyền vào
2. Gọi setSate() để render lại

Có thể xem console trong ảnh sau để trực quan hơn(Nhấn CLICK button để thực hiện change props truyền vào)

Còn lại các hàm khác y chang như khi update state

Unmouting

• componentWillUnmount()

1. Được gọi khi 1 component được loại bỏ khỏi DOM.
2. Clear rác

Kết

Source Code

Trên đây là tổng hợp kiến thức của mình về lifecycle của 1 component trong reactjs. Tất nhiên sẽ không tránh khỏi sai sót, mong bạn đọc góp ý kiến để hoàn thiện hơn cho bạn đọc sau. Cám ơn đã đọc bài viết.

Trân trọng!