我如何在我的 React 應用程式中優化 API 呼叫-js教程-PHP中文網

How I Optimized API Calls by in My React App

身為 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]);

登入後複製

它是如何運作的

累積參數：每次更新都會將其參數新增至cumulativeUpdates.current，並與任何現有參數合併。
反跳執行：processUpdates 在執行之前等待不活動的延遲毫秒。
API 呼叫：一旦去抖時間過去，就會使用合併的參數呼叫 apiUpdate。
重置累積更新：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);
}

登入後複製