Tanstack查询的安装和使用（以前是反应查询）-js教程-PHP中文网

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

DDD

发布： 2025-01-26 08:06:22

原创

573人浏览过

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

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

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

安装

使用npm安装：

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

登录后复制

或使用yarn：

<code class="bash">yarn add @tanstack/react-query</code>

登录后复制

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

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

登录后复制

基本使用

1. QueryClientProvider:

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

GarbageSort垃圾识别工具箱

GarbageSort垃圾识别工具箱是一个基于uni-app开发的微信小程序，使用SpringBoot2搭建后端服务，使用Swagger2构建Restful接口文档，实现了文字查询、语音识别、图像识别其垃圾分类的功能。前端：微信小程序采用 uni-app 开发框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各

查看详情

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

const queryClient = new QueryClient();

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

登录后复制

2. 使用useQuery获取数据:

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

<code class="javascript">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>
  );
}</code>

登录后复制

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

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

<code class="javascript">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>
  );
}</code>

登录后复制

Fetcher 的作用

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

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

登录后复制

总结

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

以上就是Tanstack查询的安装和使用（以前是反应查询）的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript机器学习与TensorFlow.js JavaScript机器学习与人工智能库应用怎样利用机器学习库（如TensorFlow.js）在浏览器中运行AI模型？如何利用 Web Codecs API 在浏览器中直接处理视频帧的编码与解码？如何利用机器学习库（如TensorFlow.js）在浏览器中运行AI模型？