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 获取数据。
