概述 | TanStack Query React 文档

TanStack Query（以前称为 React Query）通常被描述为 Web 应用程序缺失的数据获取库，但更专业地说，它让您的 Web 应用程序中的**获取、缓存、同步和更新服务器状态**变得轻而易举。

动机

大多数核心 Web 框架**不**提供一种全面的数据获取或更新的明确方式。因此，开发人员最终要么构建封装严格数据获取观点的元框架，要么发明自己的数据获取方式。这通常意味着拼凑基于组件的状态和副作用，或者使用更通用的状态管理库来存储和提供整个应用程序中的异步数据。

虽然大多数传统的状态管理库非常适合处理客户端状态，但它们**不擅长处理异步或服务器状态**。这是因为**服务器状态完全不同**。首先，服务器状态

远程持久化在您可能无法控制或拥有的位置
需要异步 API 进行获取和更新
意味着共享所有权，并且可以在您不知情的情况下被其他人更改
如果您不小心，可能会在您的应用程序中变得“过时”

一旦您掌握了应用程序中服务器状态的本质，**甚至会出现更多挑战**，例如

缓存……（可能是编程中最难的事情）
将对相同数据的多个请求去重为单个请求
在后台更新“过时”数据
知道数据何时“过时”
尽快反映数据的更新
分页和懒加载数据等性能优化
管理服务器状态的内存和垃圾回收
使用结构共享记忆查询结果

如果您没有被这份清单吓倒，那说明您可能已经解决了所有服务器状态问题并应该获得奖励。然而，如果您像绝大多数人一样，您还没有解决所有或大部分这些挑战，而我们才刚刚触及表面！

TanStack Query 绝对是管理服务器状态的*最佳*库之一。它**开箱即用，零配置，并且可以根据您的喜好进行定制**，随着应用程序的增长而不断发展。

TanStack Query 允许您战胜和克服*服务器状态*的棘手挑战和障碍，并在应用程序数据开始控制您之前控制它。

更技术性地说，TanStack Query 很可能会

帮助您从应用程序中删除**许多**复杂且被误解的代码行，并用少量 TanStack Query 逻辑替换它们
使您的应用程序更易于维护，更易于构建新功能，而无需担心连接新的服务器状态数据源
通过使您的应用程序比以往任何时候都更快、响应更灵敏，直接影响您的最终用户
可能有助于您节省带宽并提高内存性能

别再说了，快给我看代码！

在下面的示例中，您可以看到 TanStack Query 最基本和最简单的形式，用于获取 TanStack Query GitHub 项目本身的 GitHub 统计信息

在 StackBlitz 中打开

tsx

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 { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

  if (isPending) 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>
  )
}

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 { isPending, error, data } = useQuery({
    queryKey: ['repoData'],
    queryFn: () =>
      fetch('https://api.github.com/repos/TanStack/query').then((res) =>
        res.json(),
      ),
  })

  if (isPending) 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>
  )
}

你把我劝服了，那现在怎么办？

考虑参加官方的TanStack Query 课程（或者为您的整个团队购买！）
通过我们极其详尽的分步指南和API 参考，按照您自己的节奏学习 TanStack Query
阅读社区资源中的“为什么您需要 React Query”。

概述

动机

别再说了，快给我看代码！

你把我劝服了，那现在怎么办？

想跳过文档吗？

想跳过文档吗？