React 教程
Hooks 是可重用的函数。
当您有需要被多个组件使用的组件逻辑时，我们可以将该逻辑提取到自定义 Hook。
自定义 Hooks 以"use"开头。 示例:useFetch.
建立一个 Hook
在下面的代码中，我们在 Home 组件中获取数据并显示它。
我们将使用 JSONPlaceholder 服务来获取虚假数据。 此服务非常适合在没有现有数据时测试应用程序。
要了解更多信息，请查看 JavaScript Fetch API 部分。
使用 JSONPlaceholder 服务获取虚假的"待办事项"并在页面上显示标题:
实例:
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 获取数据。
相关视频
24小时阅读榜
精品课程
共22课时
24.3万人学习
共28课时
36.2万人学习
共89课时
133.1万人学习
热门下载
集成PHP7，16种组合，超全大合集
下载
phpStudy安装所需运行库集合下载
下载
程序员工具箱 v1.0 php集成环境
下载
中文版，非常好用
下载
Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。
下载
Win64位，支持php多版本共存
下载