React Query（TanStack Query）：React 的高效数据获取和状态管理-js教程-PHP中文网

React Query（TanStack Query）：React 的高效数据获取和状态管理

聖光之護

发布： 2024-12-19 08:06:09

原创

1321人浏览过

react query（tanstack query）：react 的高效数据获取和状态管理

TanStack Query：React 数据获取和状态管理利器

TanStack Query（原名 React Query）是备受青睐的 React 数据获取和状态管理库，它巧妙地处理了数据获取、缓存、同步和分页等复杂问题，显著简化了远程数据处理流程。开发者无需手动编写繁琐的 API 请求、数据存储与更新以及加载状态管理代码，TanStack Query 已经帮你完成了大部分工作。

TanStack Query 帮助开发者轻松管理 React 应用中的服务器状态，尤其在处理异步操作时，能确保流畅的用户体验。

1. TanStack Query 是什么？

TanStack Query 是一款数据获取和状态管理工具，它简化了 React 应用与服务器端数据交互的流程。它抽象并管理数据的获取、缓存、同步以及后台更新。

它主要用于管理服务器状态，即来自远程服务器或 API 的数据，例如 REST API、GraphQL 或其他数据源的数据。

主要特性：

自动缓存：自动缓存获取的数据，后续数据获取速度更快，无需重复网络请求。
自动同步：即使用户切换页面或重新访问应用，数据也能保持客户端和服务器端的同步。
后台获取：自动在后台重新获取数据，确保用户始终拥有最新数据。
内置分页和轮询：简化了分页和轮询等常见任务。

2. TanStack Query 的核心概念

1. 查询 (Query)

TanStack Query 中的查询用于从服务器（或任何外部数据源）获取数据。每个查询由唯一键标识，TanStack Query 使用此键来缓存和追踪数据。

示例：

<code class="javascript">import { useQuery } from 'react-query';

function fetchPosts() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then((response) => response.json());
}

const Posts = () => {
  const { data, error, isLoading } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>数据获取失败</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};</code>

登录后复制

useQuery 钩子使用 fetchPosts 函数获取数据。posts 字符串是唯一键，TanStack Query 将数据缓存在此键下。

2. 变异 (Mutation)

变异用于修改或创建服务器上的数据（例如，POST、PUT、DELETE 请求）。与查询类似，可以追踪变异并在成功后自动更新状态。

示例：

<code class="javascript">import { useMutation } from 'react-query';

function createPost(postData) {
  return fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: JSON.stringify(postData),
    headers: { 'content-type': 'application/json' },
  }).then((response) => response.json());
}

const NewPost = () => {
  const mutation = useMutation(createPost);

  const handleCreatePost = async () => {
    await mutation.mutate({ title: '新帖子', body: '这是一个新帖子' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>创建帖子</button>
      {mutation.isLoading ? <p>创建中...</p> : null}
      {mutation.isError ? <p>创建失败</p> : null}
      {mutation.isSuccess ? <p>帖子创建成功！</p> : null}
    </div>
  );
};</code>

登录后复制

useMutation 钩子用于创建、更新或删除数据等操作。

3. 缓存 (Cache)

TanStack Query 自动缓存查询结果，从而实现更快的渲染速度并避免重复的服务器请求。重新获取查询时，缓存数据会自动更新。

可以自定义缓存行为，例如设置缓存时间或过期时间。

乾坤圈新媒体矩阵管家

新媒体账号、门店矩阵智能管理系统

查看详情

示例：

<code class="javascript">const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // 缓存有效期为 5 分钟
  cacheTime: 1000 * 60 * 30, // 缓存持续时间为 30 分钟
});</code>

登录后复制

4. 分页 (Pagination)

TanStack Query 提供内置的分页支持。可以使用自定义页面和限制参数来获取分页数据，它会适当地缓存响应。

示例：

<code class="javascript">const fetchPage = (page) =>
  fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`)
    .then((res) => res.json());

const PaginatedPosts = () => {
  const [page, setPage] = React.useState(1);
  const { data, isLoading, isError } = useQuery(
    ['posts', page],
    () => fetchPage(page)
  );

  // ... (分页按钮逻辑) ...
};</code>

登录后复制

useQuery 钩子与数组键 (['posts', page]) 一起使用来获取分页数据。

3. 安装和设置 TanStack Query

安装 TanStack Query：

<code class="bash">npm install react-query</code>

登录后复制

1. 设置 QueryClientProvider

要在应用中启用 TanStack Query，需要将根组件包装在 QueryClientProvider 中，为整个应用提供必要的上下文。

<code class="javascript">import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient();

const App = () => (
  <QueryClientProvider client={queryClient}>
    <YourApp />
  </QueryClientProvider>
);</code>

登录后复制