Tanstack查询的安装和使用（以前是反应查询）

Tanstack Query：高效管理React应用数据请求

Tanstack Query（前身为React Query）是一个强大的库，用于简化React应用中数据请求的管理。它能有效地获取、缓存、同步和更新数据，显著提升应用性能。

安装

使用npm安装：

npm install @tanstack/react-query

或使用yarn：

yarn add @tanstack/react-query

为了使用开发者工具进行调试，请额外安装：

npm install @tanstack/react-query-devtools

基本使用

1. QueryClientProvider:

安装完成后，需要使用QueryClientProvider包裹你的应用，以便提供数据请求的上下文：

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

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
      {/* 可选：添加开发者工具 */}
      <ReactQueryDevtools initialIsOpen={false} /> 
    </QueryClientProvider>
  );
}

2. 使用useQuery获取数据:

useQuery hook 简化了数据获取过程：

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

async function fetchData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  return response.json();
}

function MyComponent() {
  const { data, isLoading, error } = useQuery({ queryKey: ['post'], queryFn: fetchData });

  if (isLoading) return <p>加载中...</p>;
  if (error) return <p>错误：{error.message}</p>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

3. 使用useMutation进行数据修改:

useMutation hook 用于处理数据修改操作（例如创建、更新、删除）：

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

async function createPost(newPost) {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newPost),
  });
  return response.json();
}

function CreatePostForm() {
  const mutation = useMutation(createPost);

  return (
    <button onClick={() => mutation.mutate({ title: '新文章', body: '文章内容' })}>
      创建文章
    </button>
  );
}

Fetcher 的作用

Fetcher 是一个函数，它充当应用和数据源之间的桥梁，负责执行数据请求并返回结果。Tanstack Query 允许自定义 Fetcher，以适应不同的数据源和需求，提高代码的可维护性和可读性。 一个简单的 Fetcher 例子：

const fetchPosts = async () => {
  const response = await fetch('/api/posts');
  return response.json();
};

总结

Tanstack Query 通过其强大的功能和易用的 API，极大地简化了 React 应用中的数据管理，提高了开发效率和应用性能。 它自动化的缓存和重新验证机制减少了不必要的请求，提升用户体验。 学习并掌握 Tanstack Query 将使您构建更高效、更可靠的 React 应用。