TanStack Query的简单介绍-摩杜云开发者社区

开源项目地址：https://github.com/tanstack/query

TanStack Query的简单介绍_react

简介

TanStack Query是一个基于React Hooks的轻量级查询库，它提供了简单易用的API来处理数据查询和数据变更的逻辑。它的核心是QueryClient，它是一个全局状态管理器，可以帮助我们从多个组件中访问和共享数据查询结果。

使用TanStack Query，我们可以通过编写自定义的查询函数来发送请求，并使用useQuery钩子来获取查询结果。此外，TanStack Query还支持缓存查询结果和实时更新数据等功能，使得应用程序的查询逻辑更加高效和灵活。

安装

使用npm or yarn安装

$ npm i @tanstack/react-query
# or
$ pnpm add @tanstack/react-query
# or
$ yarn add @tanstack/react-query

CDN调用

<script src="<https://unpkg.com/@tanstack/react-query@4/build/umd/index.production.js>"></script>

浏览器版本要求

Chrome >= 73
Firefox >= 78
Edge >= 79
Safari >= 12.1
iOS >= 12.2
opera >= 53

Quick Start

以下是一个简单的示例，说明如何使用TanStack Query来获取和显示GitHub用户信息：

javascript复制代码
import React from 'react';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';

const queryClient = new QueryClient();

function getUser(username) {
  return fetch(`https://api.github.com/users/${username}`).then(res => res.json());
}

function User({ username }) {
  const { isLoading, error, data } = useQuery(['user', username], () => getUser(username));

  if (isLoading) return <div>Loading...</div>if (error) return <div>Error: {error.message}</div>return (
    <div>
      <h1>{data.login}</h1>
      <p>{data.bio}</p>
    </div>
  );
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <User username="tannerlinsley"/>
    </QueryClientProvider>
  );
}

在上面的示例中，我们首先创建了一个QueryClient对象，并将其作为props传递给QueryClientProvider组件。这样，我们就可以在应用程序的任何地方使用useQuery钩子来获取查询结果了。

然后，我们定义了一个getUser函数，它接受GitHub用户名作为输入，并返回该用户的数据。在User组件中，我们使用useQuery钩子来调用getUser函数，并将用户名作为查询键（query key）传递给它。useQuery钩子会自动缓存查询结果，并在后续的渲染中返回缓存值，以提高性能。

最后，在App组件中，我们将User组件渲染出来，并将用户名“tannerlinsley”作为props传递给它。这样，当页面加载时，我们就会立即发送一个请求来获取GitHub用户“tannerlinsley”的信息，并将其显示在页面上。

总结

总之，TanStack Query是一个非常强大和易于使用的查询库，尤其适合于React开发人员。它简化了数据查询和状态管理的复杂度，使得我们可以更加专注于应用程序的业务逻辑。