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
,render
và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ụ,getDerivedStateFromProps
có 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ếcomponentWillReceiveProps
phươ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ậpthis
vì 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
,getSnapshotBeforeUpdate
và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,true
hoặ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ạifalse
khi 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
,componentWillReceiveProps
hoặ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:
- Ví dụ về ứng dụng React đơn giản: tìm nạp thông tin người dùng GitHub qua API
- Tạo một bộ đếm đơn giản với React
- Thiết lập mã VS để phát triển React
- Cách chuyển các đạo cụ cho một thành phần con thông qua React Router
- Tạo ứng dụng với Electron và React
- Hướng dẫn: tạo Bảng tính bằng React
- Lộ trình học React
- Tìm hiểu cách sử dụng Redux
- Bắt đầu với JSX
- Các thành phần được tạo kiểu
- Giới thiệu về Redux Saga
- Giới thiệu về React Router
- Giới thiệu về React
- Các thành phần React
- DOM ảo
- Sự kiện React
- Trạng thái phản ứng
- React Props
- Phân đoạn phản ứng
- API ngữ cảnh phản ứng
- React PropTypes
- Các khái niệm phản ứng: khai báo
- React: Cách hiển thị một thành phần khác khi nhấp chuột
- Cách lặp lại bên trong React JSX
- Props so với State trong React
- Bạn nên sử dụng jQuery hay React?
- Bạn cần biết bao nhiêu JavaScript để sử dụng React?
- Giới thiệu về Gatsby
- Cách tham chiếu phần tử DOM trong React
- Luồng dữ liệu một chiều trong React
- React Các thành phần thứ tự cao hơn
- Sự kiện vòng đời phản ứng
- Khái niệm React: Tính bất biến
- Khái niệm React: Độ tinh khiết
- Giới thiệu về React Hooks
- Giới thiệu về ứng dụng tạo-phản ứng
- Khái niệm React: Thành phần
- React: Các thành phần trình bày so với vùng chứa
- Tách mã trong React
- Kết xuất phía máy chủ với React
- Cách cài đặt React
- CSS trong React
- Sử dụng SASS trong React
- Xử lý các biểu mẫu trong React
- Chế độ phản ứng nghiêm ngặt
- Cổng phản ứng
- React Render Props
- Kiểm tra các thành phần React
- Cách chuyển một tham số cho các trình xử lý sự kiện trong React
- Cách xử lý lỗi trong React
- Cách trả về nhiều phần tử trong JSX
- Kết xuất có điều kiện trong React
- React, cách chuyển đạo cụ sang các thành phần con
- Cách lấy giá trị của một phần tử đầu vào trong React
- Cách sử dụng hook useState React
- Cách sử dụng useCallback React hook
- Cách sử dụng useEffect React hook
- Cách sử dụng useMemo React hook
- Cách sử dụng hook useRef React
- Cách sử dụng hook useContext React
- Cách sử dụng useReducer React hook
- Cách kết nối ứng dụng React của bạn với một chương trình phụ trợ trên cùng một nguồn gốc
- Hướng dẫn tiếp cận bộ định tuyến
- Cách sử dụng Công cụ dành cho nhà phát triển React
- Cách học React
- Cách gỡ lỗi ứng dụng React
- Cách hiển thị HTML trong React
- Cách sửa lỗi không khớp với `` risklySetInnerHTML '' trong React
- Cách tôi khắc phục sự cố với trạng thái biểu mẫu đăng nhập React và tính năng tự động điền của Trình duyệt
- Cách định cấu hình HTTPS trong ứng dụng React trên localhost
- Cách khắc phục lỗi "không thể cập nhật một thành phần trong khi hiển thị một thành phần khác" trong React
- Tôi có thể sử dụng React hooks bên trong một điều kiện không?
- Sử dụng useState với một đối tượng: cách cập nhật
- Cách di chuyển xung quanh các khối mã với React và Tailwind
- Phản ứng, tập trung một mục trong React khi được thêm vào DOM
- Phản ứng, chỉnh sửa văn bản trên doubleclick