React 自定义 Hook
Hook 是可重用的函数。
当你的组件逻辑需要被多个组件使用时，我们可以将该逻辑提取到一个自定义 Hook 中。
自定义 Hook 以 "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 />);
获取逻辑也可能需要在其他组件中使用，因此我们将将其提取到一个自定义 Hook 中。
将获取逻辑移动到一个新文件中，用作自定义 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 获取数据。
