当前位置：首页 > 文章列表 > 文章 > 前端 > 同时使用 useEffect 和 React Query 的反例

同时使用 useEffect 和 React Query 的反例

来源：dev.to 2024-09-27 14:04:00 0浏览收藏

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《同时使用 useEffect 和 React Query 的反例》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

让我们看一个使用 useeffect 和 react query 在 react 组件中获取和显示数据的计数器示例，重点关注每种方法如何处理数据获取和副作用。

我们假设我们正在从 api 获取当前计数，并且该计数实时更新。目标是显示计数器并使用 api 中的新数据对其进行更新。

场景1：使用useeffect

这里，我们使用 useeffect 来获取计数器数据并手动处理状态。

从“react”导入 react, { usestate, useeffect };

函数计数器() {
const [count, setcount] = usestate(null); // 存储计数器的状态
const [正在加载，setloading] = usestate(true); // 加载状态
const [错误，seterror] = usestate(null); // 错误处理状态

useeffect(() => {
const fetchcounter = async () => {
尝试{
设置加载（真）； // 开始加载
const 响应 =等待 fetch("/api/counter"); // 调用api获取计数器值
if (!response.ok) {
throw new error("获取计数器时出错");
}
const data =等待response.json();
setcount(data.count); // 设置计数器值
} 捕获（错误）{
seterror(err.message); // 设置错误状态
}最后{
设置加载（假）； // 停止加载
}
};

fetchCounter(); // Fetch the counter on mount

}, []); // 空依赖数组意味着它在 mount

上运行一次

如果（正在加载）返回

正在加载...;
如果（错误）返回错误：{错误}；

返回（

计数器：{count}

);
}

导出默认计数器；

说明：

状态管理：我们手动管理三种状态：计数、加载和错误。

数据获取：fetchcounter 函数在 useeffect 挂钩中定义，该函数在组件挂载（空依赖数组）上运行。

错误处理和加载：加载和错误状态都需要显式处理。

重新获取：如果我们需要重新获取数据（例如，当用户重新访问页面或窗口重新获得焦点时），我们必须手动实现该逻辑。

场景 2：使用 react query

在这里，我们使用 react query 来简化数据获取过程。 react query 自动处理缓存、加载、错误和重新获取。

从“react”导入react；
import { usequery } from "react-query";

函数计数器() {
const { data, error, isloading } = usequery("counter", async () => {
const response = wait fetch("/api/counter");
if (!response.ok) {
throw new error("获取计数器时出错");
}
返回response.json();
});

if (isloading) 返回

正在加载...;
如果（错误）返回错误：{error.message}；

返回（