Skip to main content

概览

React Query 通常被描述为 React 缺少的数据获取(data-fetching)库,但是从更广泛的角度来看,它使 React 程序中的获取,缓存,同步和更新服务器状态变得轻而易举。

动机

大多数的 Web 框架(如 React)都没有内置的从组件中获取或更新数据的方式,因此开发人员最终会构建自己的获取数据的方式。 这通常意味着开发者总是倾向于使用 React Hooks 将基于组件的 state 和 effects 整合在一起,或者使用更通用的状态管理库来存储和提供整个程序中的异步数据。

尽管大多数传统状态管理库非常适合用于处理客户端状态,但是它们并不适合处理异步或服务器状态。 这是因为服务器状态完全不同

  • 远程保留在你无法控制或拥有的位置
  • 需要异步 API 进行获取和更新
  • 意味着共享所有权,可以在你不知情的情况下被其他人改变
  • 如果不小心,数据可能会在应用中变得"过时"

一旦你掌握了应用中服务器状态的本质,你会遇到更多的挑战,例如:

  • 缓存...(这可能是编程中最难的事情)
  • 将对同一数据的多个请求的重复数据集合到单个请求中
  • 在后台更新"过时"的数据
  • 知道数据何时"过时"
  • 尽可能快地反映数据更新
  • 分页和延迟加载数据等性能优化
  • 管理服务器状态的内存和 GC
  • 结构化存储并共享查询结果

如果您没有被这个列表压垮,那么这一定意味着你可能已经解决了所有的服务器状态问题,值得获奖。 然而,如果你和大多数人一样,要么还没有解决所有这些挑战,要么还没有解决大部分挑战,那么我们只是触及了表面!

React Query 无疑是管理服务器状态的最佳库之一。它非常好用,开箱即用,无需配置,并且可以随着应用的增长而根据自己的喜好进行定制

React Query 使你可以击败并征服那些棘手的服务器状态挑战和障碍,并在混杂的数据开始打乱你的应用之前对其进行控制。

从更专业的角度来说,React Query 可能会:

  • 帮助您从应用中删除许多复杂和容易引起误解的代码行,用少量的 React Query 逻辑代替
  • 使你的应用更易维护,更易构建新功能,而不必担心如何连接新的服务器状态数据源
  • 通过维持应用的流畅 GUI 及更快的数据响应,直接影响最终用户
  • 潜在地帮助你节省带宽和提高内存性能

直接上代码!

在下面的例子中,你可以看到 React Query 以其最基本和简单的形式被用来获取 GitHub 项目本身的 React Query 的统计信息:

Open in CodeSandbox

import {
QueryClient,
QueryClientProvider,
useQuery,
} from "@tanstack/react-query";

const queryClient = new QueryClient();

export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
);
}

function Example() {
const { isLoading, error, data } = useQuery(["repoData"], () =>
fetch("https://api.github.com/repos/tannerlinsley/react-query").then(
(res) => res.json(),
),
);

if (isLoading) return "Loading...";

if (error) return "An error has occurred: " + error.message;

return (
<div>
<h1>{data.name}</h1>
<p>{data.description}</p>
<strong>👀 {data.subscribers_count}</strong>{" "}
<strong>{data.stargazers_count}</strong>{" "}
<strong>🍴 {data.forks_count}</strong>
</div>
);
}

你说服了我,那现在怎么办?