停止使用 React-Query 中的 useQuery ！-js教程-PHP中文網

停止使用 React-Query 中的 useQuery ！

WBOY

發布： 2024-08-06 05:25:02

原創

1213 人瀏覽過

Stop using useQuery from React-Query !

在任何 Web 應用程式中，管理載入和錯誤狀態至關重要。顯示載入狀態可以讓使用者隨時了解情況，但從歷史上看，手動實施這種管理可能很乏味。

React Query 大幅簡化了載入狀態和全域狀態的處理。事實上，React Query 避免了冗餘請求，從而優化了應用程式的效能。

讓我們來看一個在應用程式中實作載入狀態的程式碼範例。

定義一個鉤子來取得使用者清單：

export const useUsers = () => {
  const { data, isLoading } = useQuery<User[]>({
    queryKey: ["users"],
    queryFn: async () => {
      const response = await fetch("https://jsonplaceholder.typicode.com/users");
      await new Promise((resolve) => setTimeout(resolve, 2000));
      return response.json();
    },
  });

  return {
    users: data?.slice(0, 4) || [],
    isLoading,
  };
};

登入後複製

在這裡，我們使用 useQuery 來取得四個使用者。我們新增 2 秒的延遲來說明載入狀態。然後我們返回資料和載入狀態的布林值。

在元件方面，我們建立一個名為Example的元件：

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <UsersList users={users} />
    </div>
  );
};

登入後複製

在此元件中，我們使用鉤子來取得使用者清單。在渲染視圖之前，我們執行帶有載入訊息的“早期返回”，然後顯示標題、按鈕和使用者。

限制和替代方案

但是，每個網路呼叫都需要明確管理載入狀態。如果程式碼未分解，視圖的某些元素可能正在等待顯示，例如標題和操作。

這是避免遮擋視圖的替代方法：

import "./App.css";
import UsersList from "./UsersList";
import { useUsers } from "./useUsers";

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      {isLoading ? <div>Loading...</div> : <UsersList users={users} />}
    </div>
  );
};

登入後複製

在這裡，我們使用條件渲染而不是「提前返回」。此解決方案可讀性較差，並且在複雜組件中更難維護。

理想的解決方案：通用載入元件

最巧妙的解決方案是建立一個元件來渲染我們的載入訊息或基於變數的主元件。

type Props = PropsWithChildren<{
  isLoading: boolean;
}>;

const LoadingWrapper = ({ children, isLoading }: Props): JSX.Element => {
  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <>{children}</>;
};

登入後複製

在我們的組件中的使用

const Example = (): JSX.Element => {
  const { users, isLoading } = useUsers();

  return (
    <div className="container">
      ...
      <LoadingWrapper isLoading={isLoading}>
        <UsersList users={users} />
      </LoadingWrapper>
    </div>
  );
};

登入後複製

這種分解集中了條件渲染邏輯並統一了載入訊息的使用，提供了更清晰、更易於維護的程式碼。

探索懸念的魔力

但現在，如果我告訴你，我們剛剛建立的這個元件已經內建在 React 中了。更好的是，它很神奇！不再需要手動管理 isLoading 狀態！

如何？

有了 React 的 Suspense（React 版本 >= 16.6），一切都變得更簡單、更乾淨。 Suspense 允許您明確向 React 聲明元件正在等待非同步數據，React 會為我們管理一切。

實施 useSuspenseQuery

讓我們使用useSuspenseQuery來自動管理載入狀態。操作方法如下：

掛鉤以取得使用者

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery<User[]>(
    ...
  );

  return {
    users: data?.slice(0, 4) || [],
    // Without the isLoading
  };
};

登入後複製

在有 Suspense 的組件中的使用

現在，讓我們更新範例元件以使用 Suspense：

const UsersComponent = (): JSX.Element => {
  const { users } = useUsersSuspense();

  return <UsersList users={users} />;
};

const Example = (): JSX.Element => {
  return (
    <div className="container">
      <div className="user-action">
        <h1>Users</h1>
        <div>
          <button>Add users</button>
        </div>
      </div>
      <Suspense fallback={<div>Loading...</div>}>
        <UsersComponent />
      </Suspense>
    </div>
  );
};

登入後複製