Sự kiện vòng đời phản ứng

Tìm hiểu các sự kiện React Lifecycle và cách bạn có thể sử dụng chúng

Các thành phần của lớp React có thể có các hook cho một số sự kiện trong vòng đời.

Hook cho phép các thành phần chức năng cũng truy cập chúng theo một cách khác.

Trong suốt thời gian tồn tại của một thành phần, 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ể kết nối và cung cấp chức năng tùy chỉnh.

Cái móc nào là tốt nhất cho chức năng nào là điều mà chúng ta sẽ thấy ở đây.

Đầu tiên, có 3 giai đoạn trong vòng đời của thành phần React:

  • Gắn
  • Đang cập nhật
  • Tháo gỡ

Chúng ta hãy xem 3 giai đoạn đó một cách chi tiết và các phương thức được gọi cho mỗi giai đoạn.

Gắn

Khi gắn kết, bạn có 4 phương thức vòng đời trước khi thành phần được gắn trong DOM:constructor,getDerivedStateFromProps,rendervàcomponentDidMount.

Constructor

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

Bạn thường sử dụng hàm tạo để thiết lập trạng thái ban đầu bằng cách sử dụngthis.state = ....

getDerivedStateFromProps ()

Khi trạng thái phụ thuộc vào đạo cụ,getDerivedStateFromPropscó thể được sử dụng để cập nhật trạng thái dựa trên giá trị đạo cụ.

Nó đã được thêm vào trong React 16.3, nhằm mục đích thay thếcomponentWillReceivePropsphương pháp không dùng nữa.

Trong phương pháp này, bạn không có quyền truy cậpthisvì nó là một phương thức tĩnh.

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

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

kết xuất ()

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

Đó là một phương pháp thuần túy, vì vậy nó không gây ra tác dụng phụ và sẽ trả về cùng một đầu ra khi được gọi nhiều lần với cùng một đầu 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 hoặc xử lý các hoạt động trên DOM.

Đang cập nhật

Khi cập nhật, bạn có 5 phương thức vòng đời trước khi thành phần được gắn trong DOM:getDerivedStateFromProps,shouldComponentUpdate,render,getSnapshotBeforeUpdatevàcomponentDidUpdate.

getDerivedStateFromProps ()

Xem mô tả ở trên cho phương pháp này.

shouldComponentUpdate ()

Phương thức này trả về một boolean,truehoặc làfalse. Bạn sử dụng phương pháp này để cho React biết liệu nó có nên tiếp tục kết xuất hay không và mặc định làtrue. Bạn sẽ trở lạifalsekhi kết xuất là tốn kém và bạn muốn kiểm soát nhiều hơn khi điều này xảy ra.

kết xuất ()

Xem mô tả ở trên cho phương pháp này.

getSnapshotBeforeUpdate ()

Trong phương pháp này, bạn có quyền truy cập vào các đạo cụ và trạng thái của kết xuất trước đó và kết xuất hiện tại.

Các trường hợp sử dụng của nó rất thích hợp, và nó có thể là trường hợp mà bạn sẽ ít sử dụng hơn.

componentDidUpdate ()

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

Nó tương ứng vớicomponentDidMount()phương pháp từ giai đoạn lắp.

Tháo gỡ

Trong giai đoạn này, chúng tôi chỉ có một phương pháp,componentWillUnmount.

componentWillUnmount ()

Phương thức được gọi khi thành phần bị xóa khỏi DOM. Sử dụng điều này để thực hiện bất kỳ loại dọn dẹp nào bạn cần thực hiện.

Di sản

Nếu bạn đang làm việc trên một ứng dụng sử dụngcomponentWillMount,componentWillReceivePropshoặc làcomponentWillUpdate, những phương thức này không được dùng nữa trong React 16.3 và bạn nên chuyển sang các phương thức vòng đời khác.

Tải xuống miễn phí của tôiSổ tay React


Các hướng dẫn về phản ứng khác:


Công nghệ Wiki trực tuyến!