React 自定義 Hooks
Hooks 是可重用的函式。
當您有需要在多個元件中使用的元件邏輯時，我們可以將該邏輯提取到一個自定義 Hook 中。
自定義 Hooks 以“use”開頭。例如：useFetch。
構建一個 Hook
在下面的程式碼中，我們在 Home 元件中獲取資料並顯示它。
我們將使用 JSONPlaceholder 服務來獲取假資料。當沒有現有資料時，此服務非常適合測試應用程式。
要了解更多資訊，請檢視 JavaScript Fetch API 部分。
使用 JSONPlaceholder 服務獲取假的“todo”專案並在頁面上顯示標題
示例
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 />);
fetch 邏輯也可能在其他元件中需要，因此我們將把它提取到一個自定義 Hook 中。
將 fetch 邏輯移到一個新檔案，用作自定義 Hook
示例
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 />);
示例解釋
我們建立了一個名為 useFetch.js 的新檔案，其中包含一個名為 useFetch 的函式，該函式包含獲取資料所需的所有邏輯。
我們刪除了硬編碼的 URL，並用一個可以傳遞給自定義 Hook 的 url 變數替換了它。
最後，我們從 Hook 返回我們的資料。
在 index.js 中，我們匯入了 useFetch Hook，並像使用其他 Hook 一樣使用它。這是我們傳入要從中獲取資料的 URL 的地方。
現在，我們可以在任何元件中重用此自定義 Hook 來從任何 URL 獲取資料。
