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

React Query (TanStack Query)：一个强大的 React 数据获取和状态管理库

React Query（现在称为 TanStack Query）是一个非常流行的 React 应用程序数据获取和状态管理库。它通过处理数据获取、缓存、同步和分页的复杂性来简化远程数据的处理。 React Query 抽象了发出 API 请求、存储和更新数据以及管理加载状态所涉及的大部分手动过程。

TanStack Query 帮助开发人员以最少的设置管理 React 应用程序中的服务器状态，确保流畅的用户体验，尤其是在处理异步操作时。

---

1.什么是 React 查询（TanStack 查询）？

React Query 是一个数据获取和状态管理工具，有助于简化React应用程序中与服务器端数据交互的过程。它抽象并管理数据的获取、缓存、同步和后台更新。

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

主要特点：

• 自动缓存：React Query 自动缓存获取的数据，这样可以更快地获取后续数据，而无需额外的网络请求。
• 自动同步：即使用户在页面之间切换或重新访问应用程序，它也可确保您的数据在客户端和服务器之间保持同步。
• 后台获取：React Query 可以在后台自动重新获取数据，以确保用户始终拥有最新的数据。
• 轮询和分页：React Query 支持开箱即用的轮询和分页，这简化了这些常见任务。

---

2. React Query 的核心概念

1.查询

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

示例：

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>Loading...</div>;
  if (error) return <div>Error fetching posts</div>;

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

• useQuery 钩子使用 fetchPosts 函数获取数据。 posts 字符串是唯一的键，React Query 会将获取到的数据缓存在该键下。

2.突变

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

示例：

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: 'New Post', body: 'This is a new post' });
  };

  return (
    <div>
      <button onClick={handleCreatePost}>Create Post</button>
      {mutation.isLoading ? <p>Creating post...</p> : null}
      {mutation.isError ? <p>Error creating post</p> : null}
      {mutation.isSuccess ? <p>Post created!</p> : null}
    </div>
  );
};

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

3.缓存

React Query 自动缓存查询结果。这种缓存可以实现更快的渲染，并避免向服务器发出重复的请求。重新获取查询时，缓存数据会自动更新。

您可以自定义缓存行为以满足应用程序的需求，例如设置缓存时间或指定过时时间（缓存数据被视为过时的时间）。

示例：

const { data } = useQuery('posts', fetchPosts, {
  staleTime: 1000 * 60 * 5, // Cache is fresh for 5 minutes
  cacheTime: 1000 * 60 * 30, // Cache persists for 30 minutes
});

4.分页

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

示例：

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));

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error</div>;

  return (
    <div>
      <ul>
        {data.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
      <button onClick={() => setPage((prev) => prev - 1)} disabled={page === 1}>
        Previous
      </button>
      <button onClick={() => setPage((prev) => prev + 1)}>Next</button>
    </div>
  );
};

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

---

3.安装和设置 React Query (TanStack Query)

要使用React Query，您需要安装react-query (TanStack Query)：

npm install react-query

1.设置 React 查询提供程序

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

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

const queryClient = new QueryClient();

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

• QueryClient 是 React Query 的核心对象。它管理您应用程序中的所有查询和变更。

---

4. React Query 的高级功能

1.分页和无限查询

React Query 通过 useInfiniteQuery 支持分页和无限滚动，允许您处理无限列表和分页。

示例：

import { useInfiniteQuery } from 'react-query';

function fetchPostsPage({ pageParam = 1 }) {
  return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${pageParam}`)
    .then((res) => res.json());
}

const InfinitePosts = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isFetchingNextPage,
  } = useInfiniteQuery('posts', fetchPostsPage, {
    getNextPageParam: (lastPage, allPages) => lastPage.length === 10 ? allPages.length + 1 : false,
  });

  return (
    <div>
      {isLoading ? <div>Loading...</div> : null}
      {data?.pages.map((page, i) => (
        <div key={i}>
          {page.map((post) => (
            <p key={post.id}>{post.title}</p>
          ))}
        </div>
      ))}
      <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
        {isFetchingNextPage ? 'Loading more...' : hasNextPage ? 'Load More' : 'No more posts'}
      </button>
    </div>
  );
};

2.查询无效

您可以使用 queryClient.invalidateQueries 手动使查询无效。这会强制重新获取指定查询键的数据。

示例：

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>Loading...</div>;
  if (error) return <div>Error fetching posts</div>;

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

• 这可确保在创建新帖子后，自动重新获取帖子列表。

---

5.使用 React Query 的好处

1.简化的数据获取

React Query 减少了处理加载、成功和错误状态的样板文件，使数据获取更容易且更具声明性。

2.自动缓存

默认情况下会缓存获取的数据，减少不必要的网络请求并加快您的应用程序的速度。

3.后台更新

React Query 提供后台数据获取，确保您的应用程序的数据即使在未显式重新获取时也保持最新。

4.内置分页和无限查询

使用 React Query 的内置钩子处理分页和无限滚动既简单又高效。

5.用于调试的开发工具

React Query 提供了一个优秀的 DevTools 界面，用于实时检查查询、突变及其状态。

---

**6。结论

**

React Query (TanStack Query) 提供了一种高效且可扩展的方式来处理 React 应用程序中的数据获取和状态管理。借助内置缓存、后台获取、分页和错误处理，React Query 使与服务器端数据的交互变得简单、无缝。

---

以上是React Query（TanStack Query）：React 的高效数据获取和状态管理的详细内容。更多信息请关注PHP中文网其他相关文章！