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

發佈於2024-11-07

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

function useDebouncedUpdate( apiUpdate: (params: DebouncedUpdateParams) => void,
  delay: number = 300, ) {
  const accumulatedUpdates = useRef(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(空);

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],
);

合并参数：我们将新参数与任何现有参数合并，以确保捕获所有更新。
触发Debounce：每次调用handleUpdate时，我们都会触发processUpdates()，但实际的API调用是debounce的。

4. 使用 useEffect 进行清理

我们在组件卸载时清除 debounced 函数以防止内存泄漏。

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

它是如何运作的

累积参数：每次更新都会将其参数添加到cumulativeUpdates.current，与任何现有参数合并。
Debounce Execution：processUpdates 在执行之前等待不活动的延迟毫秒数。
API 调用：一旦去抖时间过去，将使用合并的参数调用 apiUpdate。
重置累积更新：API调用后，我们将accumulatedUpdates.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 (
    
       handleChange("username", e.target.value)}
      />
       handleChange("notifications", e.target.checked)}
      />
    
  );
}

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