Phản ứng móc tùy chỉnh
Móc là chức năng có thể tái sử dụng.
Khi bạn có logic thành phần cần được sử dụng bởi nhiều thành phần, chúng ta có thể trích xuất logic đó vào một Hook tùy chỉnh.
Móc tùy chỉnh bắt đầu bằng "sử dụng". Ví dụ: useFetch
.
Xây dựng một cái móc
Trong đoạn mã sau, chúng tôi đang tìm nạp dữ liệu trong thành phần Home
và hiển thị dữ liệu đó.
Chúng tôi sẽ sử dụng dịch vụ JSONPlaceholder để tìm nạp dữ liệu giả mạo. Dịch vụ này rất tốt để thử nghiệm các ứng dụng khi không có dữ liệu hiện có.
Để tìm hiểu thêm, hãy xem phần API tìm nạp JavaScript .
Sử dụng dịch vụ JSONPlaceholder để tìm nạp các mục "việc cần làm" giả và hiển thị tiêu đề trên trang:
Ví dụ:
index.js
:
import { useState, useEffect } from "react"; import ReactDOM from "react-dom/client"; const Home = () => { const [data, setData] = useState(null); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos") .then((res) => res.json()) .then((data) => setData(data)); }, []); return ( <> {data && data.map((item) => { return <p key={item.id}>{item.title}</p>; })} </> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Home />);
Logic tìm nạp cũng có thể cần thiết trong các thành phần khác, vì vậy chúng tôi sẽ trích xuất logic đó vào một Hook tùy chỉnh.
Di chuyển logic tìm nạp sang một tệp mới để sử dụng làm Hook tùy chỉnh:
Ví dụ:
useFetch.js
:
import { useState, useEffect } from "react"; const useFetch = (url) => { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)); }, [url]); return [data]; }; export default useFetch;
index.js
:
import ReactDOM from "react-dom/client"; import useFetch from "./useFetch"; const Home = () => { const [data] = useFetch("https://jsonplaceholder.typicode.com/todos"); return ( <> {data && data.map((item) => { return <p key={item.id}>{item.title}</p>; })} </> ); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Home />);
Ví dụ giải thích
Chúng tôi đã tạo một tệp mới có tên useFetch.js
chứa hàm useFetch
chứa tất cả logic cần thiết để tìm nạp dữ liệu của chúng tôi.
Chúng tôi đã xóa URL được mã hóa cứng và thay thế nó bằng một biến url
có thể được chuyển đến Hook tùy chỉnh.
Cuối cùng, chúng tôi đang trả lại dữ liệu từ Hook của mình.
Trong index.js
, chúng ta đang nhập useFetch
Hook của mình và sử dụng nó như bất kỳ Hook nào khác. Đây là nơi chúng tôi chuyển URL để tìm nạp dữ liệu.
Bây giờ chúng ta có thể sử dụng lại Hook tùy chỉnh này trong bất kỳ thành phần nào để tìm nạp dữ liệu từ bất kỳ URL nào.