”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 我如何在我的 React 应用程序中优化 API 调用

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

发布于2024-11-07
浏览:157

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

它是如何运作的

  1. 累积参数:每次更新都会将其参数添加到cumulativeUpdates.current,与任何现有参数合并。
  2. Debounce Execution:processUpdates 在执行之前等待不活动的延迟毫秒数。
  3. API 调用:一旦去抖时间过去,将使用合并的参数调用 apiUpdate。
  4. 重置累积更新: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); }
  • 用户操作:当用户键入或切换设置时,将调用handleChange。
  • 去抖更新:累积更改并在 500 毫秒不活动后发送到 API。

结论

通过将去抖与状态累积相结合,我们可以创建高效且响应迅速的应用程序。 useDebouncedUpdate 挂钩可确保将快速更改批量处理在一起,从而减少不必要的 API 调用并提高性能。

要点:

  • 去抖对于管理快速连续呼叫至关重要。
  • useRef 允许我们维护可变状态而不导致重新渲染。
  • 自定义 Hooks 像 useDebouncedUpdate 封装了复杂的逻辑,使组件更干净、更易于维护。

请随意将此挂钩集成到您的项目中并对其进行调整以满足您的特定需求。快乐编码!

版本声明 本文转载于:https://dev.to/marrouchi/how-i-did-optimize-by-40-api-calls-in-my-react-app-23od?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-04-08
  • 找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    找到最大计数时,如何解决mySQL中的“组函数\”错误的“无效使用”?
    如何在mySQL中使用mySql 检索最大计数,您可能会遇到一个问题,您可能会在尝试使用以下命令:理解错误正确找到由名称列分组的值的最大计数,请使用以下修改后的查询: 计数(*)为c 来自EMP1 按名称组 c desc订购 限制1 查询说明 select语句提取名称列和每个名称...
    编程 发布于2025-04-08
  • 为什么我会收到MySQL错误#1089:错误的前缀密钥?
    为什么我会收到MySQL错误#1089:错误的前缀密钥?
    mySQL错误#1089:错误的前缀键错误descript [#1089-不正确的前缀键在尝试在表中创建一个prefix键时会出现。前缀键旨在索引字符串列的特定前缀长度长度,可以更快地搜索这些前缀。了解prefix keys `这将在整个Movie_ID列上创建标准主键。主密钥对于唯一识别...
    编程 发布于2025-04-08
  • Java是否允许多种返回类型:仔细研究通用方法?
    Java是否允许多种返回类型:仔细研究通用方法?
    在Java中的多个返回类型:一种误解类型:在Java编程中揭示,在Java编程中,Peculiar方法签名可能会出现,可能会出现,使开发人员陷入困境,使开发人员陷入困境。 getResult(string s); ,其中foo是自定义类。该方法声明似乎拥有两种返回类型:列表和E。但这确实是如此吗...
    编程 发布于2025-04-08
  • 如何在其容器中为DIV创建平滑的左右CSS动画?
    如何在其容器中为DIV创建平滑的左右CSS动画?
    通用CSS动画,用于左右运动 ,我们将探索创建一个通用的CSS动画,以向左和右移动DIV,从而到达其容器的边缘。该动画可以应用于具有绝对定位的任何div,无论其未知长度如何。问题:使用左直接导致瞬时消失 更加流畅的解决方案:混合转换和左 [并实现平稳的,线性的运动,我们介绍了线性的转换。这...
    编程 发布于2025-04-08
  • 如何配置Pytesseract以使用数字输出的单位数字识别?
    如何配置Pytesseract以使用数字输出的单位数字识别?
    Pytesseract OCR具有单位数字识别和仅数字约束 在pytesseract的上下文中,在配置tesseract以识别单位数字和限制单个数字和限制输出对数字可能会提出质疑。 To address this issue, we delve into the specifics of Te...
    编程 发布于2025-04-08
  • 如何在php中使用卷发发送原始帖子请求?
    如何在php中使用卷发发送原始帖子请求?
    如何使用php 创建请求来发送原始帖子请求,开始使用curl_init()开始初始化curl session。然后,配置以下选项: curlopt_url:请求 [要发送的原始数据指定内容类型,为原始的帖子请求指定身体的内容类型很重要。在这种情况下,它是文本/平原。要执行此操作,请使用包含以下标头...
    编程 发布于2025-04-08
  • 如何简化PHP中的JSON解析以获取多维阵列?
    如何简化PHP中的JSON解析以获取多维阵列?
    php 试图在PHP中解析JSON数据的JSON可能具有挑战性,尤其是在处理多维数组时。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    编程 发布于2025-04-08
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-04-08
  • 如何同步迭代并从PHP中的两个等级阵列打印值?
    如何同步迭代并从PHP中的两个等级阵列打印值?
    同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时,一个包含country代码的数组,另一个包含乡村代码,另一个包含其相应名称的数组,可能会因不当提供了exply for for for the uncore for the forsion for for ytry...
    编程 发布于2025-04-08
  • 如何使用PHP从XML文件中有效地检索属性值?
    如何使用PHP从XML文件中有效地检索属性值?
    从php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...
    编程 发布于2025-04-08
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-04-08
  • 如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求和假用户代理绕过网站块?
    如何使用Python的请求模拟浏览器行为,以及伪造的用户代理提供了一个用户 - 代理标头一个有效方法是提供有效的用户式header,以提供有效的用户 - 设置,该标题可以通过browser和Acterner Systems the equestersystermery和操作系统。通过模仿像Chro...
    编程 发布于2025-04-08
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-04-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3