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

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

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

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

export const useUsers = () => {
  const { data, isLoading } = useQuery({
    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 
Loading...
;
  }

  return (
    

      

        
Users
        

          Add users
        
      
      
    
  );
};

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

限制和替代方案

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

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

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

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

  return (
    

      

        
Users
        

          Add users
        
      
      {isLoading ? 
Loading...
 : }
    
  );
};

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

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

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

type Props = PropsWithChildren;

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

  return {children}>;
};

在我們的元件中的用法

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

  return (
    

      ...
      
        
      
    
  );
};

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

探索懸念的魔力

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

如何？

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

實施 useSuspenseQuery

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

掛鉤獲取用戶

export const useUsersSuspense = () => {
  const { data } = useSuspenseQuery(
    ...
  );

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

在有 Suspense 的組件中的使用

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

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

  return ;
};

const Example = (): JSX.Element => {
  return (
    

      

        
Users
        

          Add users
        
      
      Loading...
}>
        
      
    
  );
};

懸念的優點

透過 Suspense，我們將載入狀態的管理集中在一處，使程式碼更具可讀性和可維護性。只要資料不可用，Suspense 回退就會自動顯示，無需手動管理 isLoading 狀態。

此外，Suspense 鼓勵開發團隊分解他們的程式碼。透過使用標準化的載入元件和非同步狀態處理程序，開發人員可以創建可重複使用且一致的模組，從而長期提高程式碼品質和可維護性。

結論

使用 Suspense 和 useSuspenseQuery 徹底改變了 React 應用程式中載入狀態的管理。這種方法不僅簡化了程式碼，還透過確保平滑一致的渲染來增強使用者體驗。從 useQuery 過渡到 useSuspenseQuery 是更乾淨、更有效率的應用程式的自然演進。

此外，整合 Suspense 鼓勵開發團隊分解他們的程式碼。總而言之，採用 Suspense 和 useSuspenseQuery 不僅是技術上的改進，也是邁向更健康、更有效的開發實踐的一步。

我的電子報：D