我如何在我的 React 应用程序中优化 API 调用

php中文网 2024-10-15 11:56:39

作为 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) =&gt; void,
  delay: number = 300, ) {
  const accumulatedupdates = useref<debouncedupdateparams null>(null);

  const processupdates = useref(
    debounce(() =&gt; {
      if (accumulatedupdates.current) {
        apiupdate(accumulatedupdates.current);
        accumulatedupdates.current = null;
      }
    }, delay),
  ).current;

  const handleupdate = usecallback(
    (params: debouncedupdateparams) =&gt; {
      accumulatedupdates.current = {
        id: params.id,
        params: {
          ...(accumulatedupdates.current?.params || {}),
          ...params.params,
        },
      };
      processupdates();
    },
    [processupdates],
  );

  useeffect(() =&gt; {
    return () =&gt; {
      processupdates.clear();
    };
  }, [processupdates]);

  return handleupdate;
}

export default usedebouncedupdate;
</debouncedupdateparams></string>

分解它

1. 使用 useref 累积更新

我们初始化一个名为cumulativeupdates的useref来存储所有传入更新的组合参数。

const累积更新= useref(null);

2. 消除 api 调用的抖动

我们使用 material ui 中的 debounce 实用程序创建一个去抖函数 processupdates。

const processupdates = useref(
  debounce(() =&gt; {
    if (accumulatedupdates.current) {
      apiupdate(accumulatedupdates.current);
      accumulatedupdates.current = null;
    }
  }, delay),
).current;

为什么将 useref 用于 processupdates？ 我们使用 useref 来确保不会在每次渲染时重新创建去抖函数，这会重置去抖计时器。

3. 使用 usecallback 处理更新

handleupdate函数负责累积更新并触发去抖api调用。

const handleupdate = usecallback(
  (params: debouncedupdateparams) =&gt; {
    accumulatedupdates.current = {
      id: params.id,
      params: {
        ...(accumulatedupdates.current?.params || {}),
        ...params.params,
      },
    };
    processupdates();
  },
  [processupdates],
);

合并参数：我们将新参数与任何现有参数合并，以确保捕获所有更新。
触发去抖：每次调用handleupdate时，我们都会触发processupdates()，但实际的api调用是去抖的。

4. 使用 useeffect 进行清理

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

useeffect(() =&gt; {
  return () =&gt; {
    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) =&gt; {
    debouncedUpdate({
      id: "user-settings",
      params: { [settingName]: value },
    });
  };

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

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