React Query (TanStack Query)：一個(gè)強(qiáng)大的 React 數(shù)據(jù)獲取和狀態(tài)管理庫(kù)

React Query（現(xiàn)在稱為 TanStack Query）是一個(gè)非常流行的 React 應(yīng)用程序數(shù)據(jù)獲取和狀態(tài)管理庫(kù)。它通過處理數(shù)據(jù)獲取、緩存、同步和分頁(yè)的復(fù)雜性來簡(jiǎn)化遠(yuǎn)程數(shù)據(jù)的處理。 React Query 抽象了發(fā)出 API 請(qǐng)求、存儲(chǔ)和更新數(shù)據(jù)以及管理加載狀態(tài)所涉及的大部分手動(dòng)過程。

TanStack Query 幫助開發(fā)人員以最少的設(shè)置管理 React 應(yīng)用程序中的服務(wù)器狀態(tài)，確保流暢的用戶體驗(yàn)，尤其是在處理異步操作時(shí)。

---

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

React Query 是一個(gè)數(shù)據(jù)獲取和狀態(tài)管理工具，有助于簡(jiǎn)化React應(yīng)用程序中與服務(wù)器端數(shù)據(jù)交互的過程。它抽象并管理數(shù)據(jù)的獲取、緩存、同步和后臺(tái)更新。

它主要用于管理服務(wù)器狀態(tài)，它指的是來自遠(yuǎn)程服務(wù)器或API的數(shù)據(jù)，例如來自REST API、GraphQL或任何其他數(shù)據(jù)源的數(shù)據(jù)。

主要特點(diǎn)：

• 自動(dòng)緩存：React Query 自動(dòng)緩存獲取的數(shù)據(jù)，這樣可以更快地獲取后續(xù)數(shù)據(jù)，而無需額外的網(wǎng)絡(luò)請(qǐng)求。
• 自動(dòng)同步：即使用戶在頁(yè)面之間切換或重新訪問應(yīng)用程序，它也可確保您的數(shù)據(jù)在客戶端和服務(wù)器之間保持同步。
• 后臺(tái)獲取：React Query 可以在后臺(tái)自動(dòng)重新獲取數(shù)據(jù)，以確保用戶始終擁有最新的數(shù)據(jù)。
• 輪詢和分頁(yè)：React Query 支持開箱即用的輪詢和分頁(yè)，這簡(jiǎn)化了這些常見任務(wù)。

---

2. React Query 的核心概念

1.查詢

React Query 中的查詢用于從服務(wù)器（或任何外部數(shù)據(jù)源）獲取數(shù)據(jù)。查詢由唯一鍵標(biāo)識(shí)，React Query 使用該鍵來緩存和跟蹤數(shù)據(jù)。

示例：

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 函數(shù)獲取數(shù)據(jù)。 posts 字符串是唯一的鍵，React Query 會(huì)將獲取到的數(shù)據(jù)緩存在該鍵下。

2.突變

突變用于修改或創(chuàng)建服務(wù)器上的數(shù)據(jù)（例如，POST、PUT、DELETE 請(qǐng)求）。與查詢一樣，可以跟蹤突變并在成功突變后自動(dòng)更新您的狀態(tài)。

示例：

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 鉤子用于創(chuàng)建、更新或刪除數(shù)據(jù)等操作。

3.緩存

React Query 自動(dòng)緩存查詢結(jié)果。這種緩存可以實(shí)現(xiàn)更快的渲染，并避免向服務(wù)器發(fā)出重復(fù)的請(qǐng)求。重新獲取查詢時(shí)，緩存數(shù)據(jù)會(huì)自動(dòng)更新。

您可以自定義緩存行為以滿足應(yīng)用程序的需求，例如設(shè)置緩存時(shí)間或指定過時(shí)時(shí)間（緩存數(shù)據(jù)被視為過時(shí)的時(shí)間）。

示例：

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.分頁(yè)

React Query 提供內(nèi)置的分頁(yè)支持。您可以使用自定義頁(yè)面和限制參數(shù)來獲取分頁(yè)數(shù)據(jù)，并且它將適當(dāng)?shù)鼐彺骓憫?yīng)。

示例：

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 鉤子與數(shù)組鍵（['posts', page]）一起使用來獲取分頁(yè)數(shù)據(jù)。

---

3.安裝和設(shè)置 React Query (TanStack Query)

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

npm install react-query

1.設(shè)置 React 查詢提供程序

要在應(yīng)用程序中啟用 React Query，您需要將根組件包裝在 QueryClientProvider 中，以為整個(gè)應(yīng)用程序提供必要的上下文。

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

const queryClient = new QueryClient();

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

• QueryClient 是 React Query 的核心對(duì)象。它管理您應(yīng)用程序中的所有查詢和變更。

---

4. React Query 的高級(jí)功能

1.分頁(yè)和無限查詢

React Query 通過 useInfiniteQuery 支持分頁(yè)和無限滾動(dòng)，允許您處理無限列表和分頁(yè)。

示例：

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 手動(dòng)使查詢無效。這會(huì)強(qiáng)制重新獲取指定查詢鍵的數(shù)據(jù)。

示例：

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

• 這可確保在創(chuàng)建新帖子后，自動(dòng)重新獲取帖子列表。

---

5.使用 React Query 的好處

1.簡(jiǎn)化的數(shù)據(jù)獲取

React Query 減少了處理加載、成功和錯(cuò)誤狀態(tài)的樣板文件，使數(shù)據(jù)獲取更容易且更具聲明性。

2.自動(dòng)緩存

默認(rèn)情況下會(huì)緩存獲取的數(shù)據(jù)，減少不必要的網(wǎng)絡(luò)請(qǐng)求并加快您的應(yīng)用程序的速度。

3.后臺(tái)更新

React Query 提供后臺(tái)數(shù)據(jù)獲取，確保您的應(yīng)用程序的數(shù)據(jù)即使在未顯式重新獲取時(shí)也保持最新。

4.內(nèi)置分頁(yè)和無限查詢

使用 React Query 的內(nèi)置鉤子處理分頁(yè)和無限滾動(dòng)既簡(jiǎn)單又高效。

5.用于調(diào)試的開發(fā)工具

React Query 提供了一個(gè)優(yōu)秀的 DevTools 界面，用于實(shí)時(shí)檢查查詢、突變及其狀態(tài)。

---

**6。結(jié)論

**

React Query (TanStack Query) 提供了一種高效且可擴(kuò)展的方式來處理 React 應(yīng)用程序中的數(shù)據(jù)獲取和狀態(tài)管理。借助內(nèi)置緩存、后臺(tái)獲取、分頁(yè)和錯(cuò)誤處理，React Query 使與服務(wù)器端數(shù)據(jù)的交互變得簡(jiǎn)單、無縫。

---

以上是React Query（TanStack Query）：React 的高效數(shù)據(jù)獲取和狀態(tài)管理的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！