Nếu bạn là một nhà phát triển React chưa tìm hiểu về React hooks, thì bây giờ là lúc. Bài đăng này sẽ trình bày chi tiết về useEffect React Hook. Nó là lưỡi câu tương đương với một con dao của Quân đội Thụy Sĩ. Nó giải quyết nhiều vấn đề khác nhau, chẳng hạn như cách lấy dữ liệu khi một thành phần gắn kết, cách chạy mã khi một trạng thái hoặc một giá đỡ thay đổi, cách thiết lập bộ hẹn giờ hoặc khoảng thời gian, v.v.
UseEffect được sử dụng cho hầu hết mọi thứ bạn muốn “làm” trong một thành phần React không trả về JSX (bất kỳ loại tác dụng phụ nào). Bạn cũng có thể có một số useEffects cho mỗi thành phần.
Tất cả sức mạnh này đều phải trả giá: trừ khi bạn hiểu cách thức hoạt động của nó, nếu không, nó có thể làm bạn bối rối. Trong bài đăng này, chúng tôi sẽ xem xét nhiều ví dụ khác nhau để bạn có thể nắm bắt mô hình khái niệm và áp dụng nó cho mã của riêng bạn.
Móc phản ứng - Nó đang cố gắng giải quyết điều gì?
Hooks lần đầu tiên được giới thiệu trong phiên bản React 16.8 và hiện được nhiều dự án React sử dụng. Hooks khắc phục được vấn đề lặp lại mã giữa các thành phần. Chúng được viết mà không sử dụng các lớp. Điều này không có nghĩa là React đang từ bỏ các lớp; hooks chỉ đơn giản là một phương pháp thay thế.
React cho phép bạn nhanh chóng tạo các thành phần phức tạp với logic trạng thái. Rất khó để tách các thành phần này vì lớp dựa trên các Phương thức Vòng đời của React. Đây là lúc React Hooks xuất hiện.
Chúng cho phép bạn chia một thành phần thành các chức năng nhỏ hơn. Thay vì chia mã thành các phần nhỏ hơn dựa trên các phương pháp Vòng đời, bây giờ bạn có thể sắp xếp và tách mã thành các đơn vị nhỏ hơn tùy thuộc vào chức năng.
UseEffect Hook là gì?
Hook là các hàm cho phép bạn truy cập trạng thái và các khả năng phản ứng khác mà không cần phải viết các lớp ES6. API react hooks có một hook được gọi là useEffect. Nếu bạn đã quen với các vòng đời phản ứng, thì móc useEffect cũng giống như thành phầnDidMount, thành phầnDidUpdatevà thành phầnWillUnmount các phương pháp vòng đời kết hợp.
Theo tài liệu React Hooks, nó được tạo ra để giải quyết một số vấn đề với các phương thức vòng đời thành phần lớp ES6.
cú pháp
Đối số đầu tiên là một hàm gọi lại, được thực thi theo mặc định sau mỗi lần hiển thị. Tham số thứ hai là một mảng Phụ thuộc tùy chọn hướng dẫn Hook chỉ gọi lại nếu trạng thái đích thay đổi.
Hook so sánh trạng thái lịch sử và hiện tại của từng phụ thuộc. Nếu hai giá trị không khớp, Hook sẽ gọi lại được chỉ định trong tham số đầu tiên. Mảng phụ thuộc thay đổi hành vi gọi lại thông thường và đảm bảo rằng Hook bỏ qua tất cả các thành phần khác trong phạm vi thành phần.
Sử dụng cơ bản
Để lưu một tin nhắn, tôi đang sử dụng React useState trong mẫu mã ở trên. Sau đó, tôi lấy biến trạng thái tin nhắn của mình và in nó trên màn hình. Tuy nhiên, bây giờ tôi muốn sử dụngEffect để sửa đổi thông báo một giây sau khi thành phần đã được gắn kết.
Tôi đã chèn hiệu ứng của mình vào sau dòng useState sau khi nhập useEffect từ React framework. Tham số đầu tiên để sử dụngEffect là một hàm. Khi trình xử lý chức năng này được thực thi, nó sẽ xử lý mọi tác dụng phụ mà bạn cung cấp. Hàm là một hàm gọi lại được gọi khi một trong các sự kiện vòng đời của thành phần React xảy ra.
Khi nào sử dụng nó?
Sử dụng Móc hiệu quả có thể hữu ích trong nhiều trường hợp khác nhau. Sau đây là những điều quan trọng nhất:
- Chúng tôi có thể thay đổi tham số này từ phía máy khách khi chúng tôi muốn tìm nạp dữ liệu tùy thuộc vào một đối số được cung cấp. Nó sẽ được gọi lại sau khi thông số đã được cập nhật với dữ liệu mới.
- Nếu chúng ta muốn truy xuất dữ liệu từ một điểm cuối API và hiển thị nó ở phía máy khách. Khi thành phần của chúng tôi hiển thị, hàm hoặc trình xử lý được cung cấp cho móc useEffect được thực thi và dữ liệu trong các trạng thái thành phần được truy xuất. Các trạng thái này sau đó được sử dụng trong các thành phần giao diện người dùng.
- Khi thành phần của bạn dựa vào dữ liệu từ thế giới bên ngoài và chúng tôi không thể đảm bảo rằng dữ liệu sẽ đến, chúng tôi nên sử dụngEffect (có thể máy chủ ở dưới đó). Thay vì đưa ra các vấn đề và ngăn các thành phần khác hiển thị, hãy đặt chúng vào hook useEffect.
Trường hợp sử dụng
Nếu thành phần hiển thị lại sau lần chạy đầu tiên, nó sẽ không thực thi.
Bất cứ khi nào một thành phần hiển thị hoặc kết xuất lại, nó phải luôn được thực thi.
Theo mặc định, chương trình chỉ chạy một lần. Sau đó, nếu các giá trị chống thay đổi, hãy chạy:
Đối với các hoạt động không đồng bộ, hãy luôn sử dụng useEffect.
Các khối mã useEffect là dấu hiệu rõ ràng của các công việc không đồng bộ cho các nhà phát triển đồng nghiệp của bạn. Có thể tạo mã không đồng bộ mà không sử dụng useEffect, nhưng đây không phải là “phương pháp React” và nó làm tăng cả độ phức tạp và nguy cơ mắc lỗi.
Sử dụng useEffect thay vì viết mã không đồng bộ có thể dừng giao diện người dùng là một kỹ thuật nổi tiếng trong cộng đồng React, đặc biệt là cách nhóm React đã xây dựng nó để thực hiện một tác dụng phụ.
Một lợi thế khác của việc sử dụng nó là các nhà phát triển có thể chỉ cần xem lại mã và phát hiện ngay mã được chạy “ngoài luồng điều khiển”, điều này trở nên quan trọng chỉ sau chu kỳ hiển thị đầu tiên. Hơn nữa, các khối phù hợp để trích xuất thành các Hook tùy chỉnh có thể tái sử dụng và thậm chí nhiều ngữ nghĩa hơn.
Một ví dụ
Sử dụng mã useEffect, tăng một số mỗi giây.
Kết luận
Theo quan điểm của tôi, hiểu các nguyên tắc thiết kế cơ bản và các phương pháp hay nhất của việc sử dụngEffect Hook là một kỹ năng quan trọng cần học nếu bạn muốn trở thành một nhà phát triển React cấp độ tiếp theo.
Tóm lại, useEffect Hook nhận một hàm bao gồm logic đầy đủ, có khả năng ảnh hưởng đến mệnh lệnh. Mảng phụ thuộc, là tham số thứ hai, có thể được sử dụng để ảnh hưởng đến việc thực thi. Trong khi xử lý nó, nó cũng cần thiết để viết mã làm sạch bằng cách sử dụng chức năng trả về.
Hãy cho chúng tôi biết trong phần bình luận nếu bài viết hữu ích.
Bình luận