Vòng đời của một component trong Reactjs

Xin chào mọi người, hôm nay tôi trở lại sau một thời gian dài vắng bóng. Hôm nay chúng ta hãy xem xét vòng đời của các thành phần trong reactjs.

Các phần lồi sau đây mô tả vòng đời của một thành phần:

😄

1) Khởi tạo

  • Phương thức khởi tạo tương tự được gọi khi thể hiện thành phần được tạo.

2) Cài đặt

là một hàm ràng buộc kết nối các thành phần với nhau.

componentwillmount ()

  • Được gọi trước khi thành phần được hiển thị bên ngoài trình duyệt. Quá trình diễn ra nhanh chóng, vì vậy đừng làm quá nhiều ở đây, chức năng này chỉ được thực thi một lần (kể từ phiên bản 16.3, chức năng này đã không được chấp nhận và sẽ bị loại bỏ trong phiên bản 16.3.17).

kết xuất ()

  • Được gọi khi thành phần được hiển thị ra khỏi trình duyệt.
  • sẽ trả về những gì bạn đã viết, có thể là giá trị rỗng hoặc sai nếu bạn không muốn. Không).

componentdidmount ()

  • Được gọi sau khi thành phần được hiển thị cho trình duyệt, chức năng này chỉ được thực thi một lần.
  • Gọi hàm này để thông báo cho thành phần biết rằng thành phần đã tồn tại trong dom. , từ đó thành phần có thể được sử dụng để thực hiện các hoạt động dom một cách bình thường.

Để hiểu rõ hơn, hãy xem một số ví dụ.

Ví dụ:

Khi chạy, chúng tôi nhận được kết quả sau:

Vòng đời của một component trong Reactjs

Constructor () được gọi khi thành phần được gọi đầu tiên, sau đó componentwillmount () được gọi, sau đó reder () được gọi, và cuối cùng hàm componentdidmount được gọi khi kết xuất () hoàn tất.

3) Cập nhật

  • Sự cố xảy ra khi tôi cập nhật thành phần về đạo cụ, về trạng thái.

componentwillreceiveprops (công cụ tiếp theo)

  • Chức năng này chạy khi đạo cụ của thành phần được tạo thay đổi.
  • Để kết xuất lại, phải gọi setstate ().

shouldcomponentupdate (nextprops, nextstate)

  • Thực thi ngay sau khi thay đổi trạng thái và đạo cụ.
  • sẽ trả về true hoặc false. Phương pháp này sẽ xác định xem thành phần đã được cập nhật hay chưa. Theo mặc định, giá trị này là true. Trả lại giá trị này thành false nếu bạn không muốn thành phần hiển thị lại sau khi cập nhật trạng thái hoặc đạo cụ.

componentwillupdate (nextprops, nextstate)

  • Được gọi khi trạng thái thành phần được cập nhật trước khi thành phần hiển thị lại.
  • This.setstate không thể được gọi trong componentwillupdate
  • Hàm kết xuất sẽ được gọi ngay sau hàm này.
  • (Kể từ phiên bản 16.3, chức năng này không được dùng nữa và sẽ bị xóa trong phiên bản 17)

componentdidupdate (phần trước, phần mới nhất)

  • Được gọi khi phiên bản thành phần được cập nhật và componentdidupdate được gọi sau khi html kết xuất được tải.

Sau đây, chúng tôi sẽ đưa ra một số ví dụ để bạn hiểu rõ hơn.

Ví dụ về cập nhật trạng thái

Kết quả khi nhấp vào nút “Nhấp vào tôi”:

Vòng đời của một component trong Reactjs

Ví dụ về cập nhật mặt hàng

Tạo một tệp content.js trong thư mục src với nội dung sau:

Kết quả khi nhấp vào nút “nhấp vào tôi”

Vòng đời của một component trong Reactjs

4) Gỡ cài đặt

componentwillunmount ()

  • Được gọi trước khi thành phần bị xóa khỏi dom.

Kết luận

Trên đây là hiểu biết nhỏ của tôi về vòng đời thành phần trong reactjs. Cảm ơn tất cả các bạn đã xem bài viết của tôi.

Tham khảo:

  • https://viblo.asia/p/vong-doi-cua-component-in-react-ggj59xajlx2
  • https://viblo.asia/p/vong-doi- cua-mot-react-component-rqqklmrzz7z

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *