同时使用 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) 返回

返回（

计数器：{data.count}

导出默认计数器；

说明：

状态管理：react query 自动管理状态（加载、错误、数据）。无需显式设置加载或错误状态。

数据获取：usequery 钩子简化了获取。它自动管理缓存、后台更新和重试。

错误处理和加载：react query 在内部处理这些，并且钩子返回 isloading 和错误状态，可以直接在 ui 中使用。

重新获取：当用户重新访问页面或窗口获得焦点时，react query 会自动重新获取数据。它还可以设置为每隔一段时间或根据自定义条件重新获取。

两种方法的比较：

结论：

useeffect 非常适合处理自定义或一次性副作用，但在数据获取方面，它需要手动状态管理和更多样板代码。

react query 通过抽象加载、错误处理和缓存等常见任务，显着简化了数据获取。它非常适合您处理频繁更改的数据或需要后台重新获取和缓存等功能的场景。