React 自定义 Hooks
钩子是可重复使用的函数。
当您有需要由多个组件使用的组件逻辑时，我们可以将该逻辑提取到自定义 Hook。
自定义 Hooks 以“use”开头。例如： useFetch.
建立一个钩子
在下面的代码中，我们获取 Home 组件并显示它。
我们将使用 JSON占位符 服务来获取虚假数据。此服务非常适合在没有现有数据的情况下测试应用程序。
要了解更多信息，请查看 JavaScript 获取 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 中。
将获取逻辑移动到新文件以用作自定义钩子：
例子：
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，并将其替换为 url 可以传递给自定义 Hook 的变量。
最后，我们从 Hook 返回数据。
在 index.js，我们正在进口我们的 useFetch Hook 并像其他 Hook 一样使用它。这是我们传入 URL 来获取数据的地方。
现在我们可以在任何组件中重复使用这个自定义 Hook 来从任何 URL 获取数据。
