Một bảng tờ gian cho các Phương thức Lifecycle của React Component

Lifecycle của component trong React là một chuỗi các phương thức được gọi trong suốt vòng đời của một component React. Những phương thức này cho phép bạn tương tác với component tại các giai đoạn khác nhau của vòng đời, chẳng hạn như khi nó được tạo ra lần đầu, khi props của nó thay đổi hoặc khi nó chuẩn bị bị hủy bỏ.

Trong bài viết này, chúng tôi sẽ cung cấp cho bạn một cái nhìn tổng quan về các phương thức Lifecycle của component React.

Khởi tạo

componentWillMount

componentWillMount()

• setState() có thể được gọi ở đây và không gây ra việc render lại

componentDidMount

componentDidMount()

• Truy cập vào chính component và ref của con (componentDidMount() lan truyền lên)
• Thiết lập nghe sự kiện và bộ đếm thời gian
• Thực hiện các yêu cầu AJAX

Cập nhật

componentWillReceiveProps

componentWillReceiveProps(nextProps = {})

• Sử dụng để so sánh props sắp tới (nextProps.prop) với props cũ (this.props.prop)
• setState() (đặc biệt là khi phản ứng lại sự thay đổi prop) có thể được gọi ở đây và không gây ra việc render lại

shouldComponentUpdate

boolean shouldComponentUpdate(
  object nextProps, object nextState
) { return statement }

• Trừ khi sử dụng forceUpdate, có thể được sử dụng để chặn một chu kỳ render. componentWillUpdate và componentDidUpdate sẽ không được gọi – Sử dụng để tăng hiệu suất.

componentWillUpdate

void componentWillUpdate(
  object nextProps, object nextState
)

• Không thể sử dụng this.setState() trong phương thức này
• Cơ hội để thực hiện các công việc chuẩn bị trước khi một cập nhật diễn ra

render

render()

• Phương thức cập nhật.
• Đọc an toàn từ props và state ở đây

componentDidUpdate(prevProps = {},  prevState = {})

• Thực hiện trên DOM sau khi cập nhật trong phương thức này

Hủy bỏ

componentWillUnmount()

• Dọn dẹp DOM
• Loại bỏ người nghe sự kiện và ngừng bộ đếm thời gian

Nguồn: https://gist.github.com/beaucharman/c85db9cb76929ab9a85dab398cd921c1