掌握 TanStack 查询：React 中高效数据获取综合指南-js教程-PHP中文网

Mastering TanStack Query: A Comprehensive Guide to Efficient Data Fetching in React

在现代 React 开发中，高效的数据获取和状态管理对于构建响应式和高性能的应用程序至关重要。虽然 useEffect 和 useState 等传统工具可以处理数据获取，但它们通常会导致代码复杂且难以维护，尤其是随着应用程序的增长。输入 TanStack Query（以前称为 React Query），这是一个功能强大的库，可以简化数据获取、缓存、同步等操作。

在这篇文章中，我们将深入探讨 TanStack Query 是什么、为什么应该考虑使用它，以及如何在 React 应用程序中实现它。

什么是 TanStack 查询？

TanStack Query 是一个用于 React 和其他框架的无头数据获取库。它提供了在应用程序中获取、缓存、同步和更新服务器状态的工具，而无需复杂且通常冗余的代码。

主要特点：

数据缓存：自动缓存数据并重复使用它，直到它变得陈旧。
自动重新获取：在后台自动重新获取数据，以使您的 UI 保持最新状态。
乐观更新：提供乐观更新机制，确保响应式 UI。
服务器端渲染：轻松支持服务器端渲染。
开箱即用的开发工具：包括用于调试和监控查询的开发工具。

为什么使用 TanStack 查询？

使用 TanStack Query 可以极大地简化 React 应用程序中的数据获取逻辑。以下是考虑它的一些理由：

减少样板代码：使用 useEffect 获取数据需要管理加载状态、错误处理和重新获取。 TanStack Query 抽象了这些问题，让您能够专注于核心功能。
提高性能：通过缓存、后台重新获取和重复数据删除，TanStack Query 通过减少不必要的网络请求来帮助提高应用程序性能。
处理复杂场景：无论是分页、无限滚动还是处理陈旧数据，TanStack Query 都能为复杂的数据获取需求提供强大的解决方案。

如何在 React 应用程序中使用 TanStack 查询

让我们逐步了解在 React 项目中设置 TanStack Query 并使用它从 API 获取数据。

第 1 步：安装

首先，安装必要的软件包：

npm install @tanstack/react-query

登录后复制

如果您使用 TypeScript，您还需要安装以下类型：

npm install @tanstack/react-query @types/react

登录后复制

第 2 步：设置查询客户端

在应用程序中使用 TanStack Query 之前，您需要设置 QueryClient 并使用 QueryClientProvider 包装您的应用程序。

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';

// Create a client
const queryClient = new QueryClient();

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

登录后复制

第 3 步：使用 useQuery 获取数据

为了获取数据，TanStack Query 提供了 useQuery 钩子。这个钩子需要一个查询键和一个返回承诺的函数（通常是 API 调用）。

以下是从 API 获取数据的示例：

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchPosts = async () => {
  const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
  return data;
};

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

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading posts</div>;

  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

登录后复制

第 4 步：处理查询状态

TanStack Query 可以轻松处理查询的不同状态，例如加载、错误或成功。您可以使用 useQuery 提供的 isLoading、isError、isSuccess 和其他属性来控制根据查询状态呈现的内容。

const { data, error, isLoading, isSuccess, isError } = useQuery(['posts'], fetchPosts);

if (isLoading) {
  return <div>Loading...</div>;
}

if (isError) {
  return <div>Error: {error.message}</div>;
}

if (isSuccess) {
  return (
    <div>
      {data.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

登录后复制

第 5 步：乐观更新

乐观更新允许您在服务器确认更新之前更新 UI，提供更快捷的用户体验。这可以使用 TanStack 查询中的 useMutation 钩子来完成。

import { useMutation, useQueryClient } from '@tanstack/react-query';

const addPost = async (newPost) => {
  const { data } = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
  return data;
};

function AddPost() {
  const queryClient = useQueryClient();

  const mutation = useMutation(addPost, {
    onMutate: async newPost => {
      await queryClient.cancelQueries(['posts']);

      const previousPosts = queryClient.getQueryData(['posts']);

      queryClient.setQueryData(['posts'], old => [...old, newPost]);

      return { previousPosts };
    },
    onError: (err, newPost, context) => {
      queryClient.setQueryData(['posts'], context.previousPosts);
    },
    onSettled: () => {
      queryClient.invalidateQueries(['posts']);
    },
  });

  return (
    <button onClick={() => mutation.mutate({ title: 'New Post', body: 'This is a new post.' })}>
      Add Post
    </button>
  );
}

登录后复制