我如何在我的 React 應用程式中優化 API 呼叫

身為 React 開發人員，我們經常面臨需要透過 API 同步多個快速狀態變更的場景。對每一個微小的變化進行 API 呼叫可能效率低下，並且會給客戶端和伺服器帶來負擔。這就是去抖和巧妙的狀態管理發揮作用的地方。在本文中，我們將建立一個自訂 React 鉤子，透過合併有效負載和消除 API 呼叫來擷取平行 API 更新呼叫。

問題

想像一個輸入字段，使用者可以在其中調整設定或首選項。每次擊鍵或調整都可以觸發 API 呼叫來儲存新狀態。如果使用者快速連續進行多項更改，這可能會導致大量 API 請求：

• 網路資源利用效率低。
• 潛在的競爭條件。
• 伺服器上不必要的負載。

輸入去發抖

去抖動是一種用來限制函數觸發速率的技術。您不是立即呼叫函數，而是等待一段時間不活動後再執行函數。如果在延遲結束之前有另一個電話打入，計時器將重置。

為什麼要使用去抖動？

• 效能改善：減少不必要的 API 呼叫次數。
• 資源最佳化：最小化伺服器負載與網路使用。
• 增強的使用者體驗：防止快速連續呼叫造成的延遲和潛在錯誤。

useRef 的作用

在 React 中，useRef 是一個鉤子，可讓您在渲染之間保留可變值而不觸發重新渲染。它本質上是一個保存可變值的容器。

為什麼在這裡使用 useRef ？

• 保留累積更新：我們需要追蹤渲染之間的累積更新，而不會導致重新渲染。
• 存取可變當前值：useRef 為我們提供了一個可以讀寫的 .current 屬性。

useDebouncedUpdate 掛鉤

讓我們深入研究程式碼並了解它們是如何組合在一起的。

import { debounce } from "@mui/material";
import { useCallback, useEffect, useRef } from "react";

type DebouncedUpdateParams = {
  id: string;
  params: Record<string, any>;
};

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef<DebouncedUpdateParams | null>(null);

  const processUpdates = useRef(
    debounce(() => {
      if (accumulatedUpdates.current) {
        apiUpdate(accumulatedUpdates.current);
        accumulatedUpdates.current = null;
      }
    }, delay),
  ).current;

  const handleUpdate = useCallback(
    (params: DebouncedUpdateParams) => {
      accumulatedUpdates.current = {
        id: params.id,
        params: {
          ...(accumulatedUpdates.current?.params || {}),
          ...params.params,
        },
      };
      processUpdates();
    },
    [processUpdates],
  );

  useEffect(() => {
    return () => {
      processUpdates.clear();
    };
  }, [processUpdates]);

  return handleUpdate;
}

export default useDebouncedUpdate;

分解它

1. 使用 useRef 累積更新

我們初始化一個名為cumulativeUpdates的useRef來儲存所有傳入更新的組合參數。

const累積更新 = useRef(null);

2. 消除 API 呼叫的抖動

我們使用 Material UI 中的 debounce 實用程式建立一個去抖函數 processUpdates。

const processUpdates = useRef(
  debounce(() => {
    if (accumulatedUpdates.current) {
      apiUpdate(accumulatedUpdates.current);
      accumulatedUpdates.current = null;
    }
  }, delay),
).current;

• 為什麼將 useRef 用於 processUpdates？ 我們使用 useRef 來確保不會在每次渲染時重新建立去抖函數，這會重置去抖計時器。

3. 使用 useCallback 處理更新

handleUpdate函數負責累積更新並觸發去抖API呼叫。

const handleUpdate = useCallback(
  (params: DebouncedUpdateParams) => {
    accumulatedUpdates.current = {
      id: params.id,
      params: {
        ...(accumulatedUpdates.current?.params || {}),
        ...params.params,
      },
    };
    processUpdates();
  },
  [processUpdates],
);

• 合併參數：我們將新參數與任何現有參數合併，以確保捕獲所有更新。
• 觸發去抖：每次呼叫handleUpdate時，我們都會觸發processUpdates()，但實際的API呼叫是去抖動的。

4. 使用 useEffect 進行清理

我們在元件卸載時清除 debounced 函數以防止記憶體洩漏。

useEffect(() => {
  return () => {
    processUpdates.clear();
  };
}, [processUpdates]);

它是如何運作的

1. 累積參數：每次更新都會將其參數新增至cumulativeUpdates.current，並與任何現有參數合併。
2. 反跳執行：processUpdates 在執行之前等待不活動的延遲毫秒。
3. API 呼叫：一旦去抖時間過去，就會使用合併的參數呼叫 apiUpdate。
4. 重置累積更新：API 呼叫後，我們將cumulativeUpdates.current 重設為 null。

使用範例

以下是在組件中使用此鉤子的方法：

import React from "react";
import useDebouncedUpdate from "./useDebouncedUpdate";

function SettingsComponent() {
  const debouncedUpdate = useDebouncedUpdate(updateSettingsApi, 500);

  const handleChange = (settingName, value) => {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

  return (
    <div>
      <input
        type="text"
        onChange={(e) => handleChange("username", e.target.value)}
      />
      <input
        type="checkbox"
        onChange={(e) => handleChange("notifications", e.target.checked)}
      />
    </div>
  );
}

function updateSettingsApi({ id, params }) {
  // Make your API call here
  console.log("Updating settings:", params);
}

• 使用者操作：當使用者鍵入或切換設定時，將呼叫handleChange。
• 去抖動更新：在 500 毫秒不活動後累積變更並將其傳送至 API。

結論

透過將去抖與狀態累積結合，我們可以創建高效且反應迅速的應用程式。 useDebouncedUpdate 掛鉤可確保將快速變更批次處理在一起，從而減少不必要的 API 呼叫並提高效能。

重點：

• 去抖 對於管理快速連續呼叫至關重要。
• useRef 允許我們維護可變狀態而不導致重新渲染。
• 自訂 Hook 像 useDebouncedUpdate 封裝了複雜的邏輯，使元件更乾淨、更易於維護。

請隨意將此掛鉤整合到您的專案中並對其進行調整以滿足您的特定需求。快樂編碼！

以上是我如何在我的 React 應用程式中優化 API 呼叫的詳細內容。更多資訊請關注PHP中文網其他相關文章！