开发中的好帮手 React Query 简单运用教程 [译]

2024-02-05 14:41:40

React Query：开发中的数据处理利器

在现代应用程序开发中，与后端交互获取数据是不可或缺的一环。如何更便捷高效地处理这些数据至关重要。React Query，一个基于 Promise 的数据获取工具库，旨在简化数据获取并提升处理效率。

基本用法

使用 React Query 非常简单。首先，定义一个唯一的 查询键 ，用于标识要获取的数据。然后，编写 查询函数 ，这是一个异步函数，负责获取所需数据。最后，通过 useQuery 钩子使用查询键和查询函数获取数据。useQuery 返回三个值：

data： 查询结果
isLoading： 查询是否正在进行中（布尔值）
error： 查询是否失败（错误对象）

常见场景

React Query 适用于多种场景：

获取数据： 从后端获取单条或多条数据。
更新数据： 通过提交表单或其他方式更新数据。
删除数据： 删除后端的数据。
轮询数据： 定期从后端获取更新的数据。
缓存数据： 存储经常访问的数据，避免重复获取。
处理错误： 优雅地处理查询失败。

优点

易用性： 直观的 API，使用简单。
性能： 高效的缓存机制，减少不必要的请求。
可扩展性： 支持复杂的查询，可轻松集成到大型项目中。
社区支持： 活跃的社区，提供文档和示例。

缺点

学习曲线： 使用 React Query 涉及一些概念，需要学习。
文档： 文档可能存在不足，需要自行探索或社区支持。
不支持 SSR： 目前不支持服务器端渲染。

代码示例

获取用户数据的示例代码：

import { useQuery } from 'react-query';

const fetchUser = async ({ queryKey }) => {
  const id = queryKey[1];
  const response = await fetch(`/api/users/${id}`);
  return response.json();
};

const User = () => {
  const { data, isLoading, error } = useQuery(['user', id], fetchUser);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
};