React.js 09 – Lifecycle event React.js

0
47

Trong suốt vòng đời của một component, có một loạt các sự kiện được gọi và với mỗi sự kiện bạn có thể nối và cung cấp chức năng tuỳ chỉnh.

Đầu tiên, có 3 giai đoạn trong lifecycle component react.

  • Mounting
  • Updating
  • Unmounting

Chúng ta sẽ xem 3 giai đoạn chi tiết và các phương thức gọi cho từng giai đoạn.

Mounting

Khi mounting có 4 phương thức trong lifecycle trước khi các component được gắn trong DOM: các constructor , getDerivedStateFromProps, render  và componentDidMount

Constructor

Constructor là phương thức đầu tiên được gọi khi gắn một component.

Bạn thường sử dụng constructor để thiết lập stateban đầu bằng cách sử dụng this.state = ....

getDerivedStateFromProps()

Khi state trong component phụ thuộc vào props , getDerivedFromProps có thể được sử dung để cập nhật statedựa trên giá trị của props.

Phương thức này được thêm vào trong React từ trong React 16.3 , nhằm thay thế phương thức componentWillReceiveProps một phương thức cũ không được sử dụng nữa.

Trong phương thức này, bạn không truy cập được this vì đây là phương thức tĩnh.

Đây là phương thức thuần túy, vì vậy nó không ra các tác dụng phụ và sẽ trả về cùng một điểm ra khi được gọi nhiều lần với cùng một điểm vào.

Trả về một đối tượng có các phần tử được cập nhật của state (hoặc null nếu state không thay đổi)

render()

Từ phương thức render() , bạn trả về JSX để xây dựng các giao diện component.

Đây là phương thức thuần túy (pure function) , vì vậy nó không gây ra các tác dụng phụ và sẽ trả về cùng một điểm ra khi được gọi nhiều lần với cùng một điểm vào.

componentDidMount()

Phương thức này là phương thức mà bạn sẽ sử dụng để thực hiện các lệnh gọi API, xử lý các hoạt động trên DOM.

Updating

Khi cập nhật bạn sẽ có 5 phương thức lifecycle trước khi các component được gắn vào DOM: các phương thức này bao gồm getDerivedStateFromProps , shouldComponentUpdate, render, getSanpshotBeforeUpdate và componentDidUpdate .

getDerivedStateFromProps()

Xem mô tả ở trên cho phương thức này

shouldComponentUpdate()

Phương thức này trả về một boolean , true hoặc false. Bạn sử dụng phương thức này để báo cho React nếu muốn cập nhật lại DOM mặc định sẽ trả về là true.

Khi bạn trả về false thì việc cập nhật DOM sẽ dừng lại .

render()

Các bạn có thể xem mô tả ở trên

getSnapShortBeforeUpdate()

Trong phương thức này, bạn có quyền truy cập vào các props và state của render() trước đó và render() hiện tại

componentDidUpdate()

Phương thức này được gọi khi component đã được cập nhật trên DOM sử dụng công cụ này để chạy bất kỳ API DOM nào của bên thứ 3 hoặc gọi API nào phải được cập nhật khi DOM thay đổi.

Nó tương đương với  phương thức componentDidMount()  ở giai đoạn moun ting.

Unmounting

Trong giai đoạn này, chúng ta chỉ có một phương thức componentWillUnmount

componentWillUnmount()

Phương thức được gọi khi component được xóa khỏi DOM. Sử dụng phương thức này để dọn dẹp component.

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây