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

百变鹏仔 3天前 #JavaScript

文章标签应用程序

作为 react 开发人员，我们经常面临需要通过 api 同步多个快速状态更改的场景。对每一个微小的变化进行 api 调用可能效率低下，并且会给客户端和服务器带来负担。这就是去抖和巧妙的状态管理发挥作用的地方。在本文中，我们将构建一个自定义 react 钩子，通过合并有效负载和去抖 api 调用来捕获并行 api 更新调用。

问题

想象一个输入字段，用户可以在其中调整设置或首选项。每次击键或调整都可以触发 api 调用来保存新状态。如果用户快速连续进行多项更改，这可能会导致大量 api 请求：

输入去抖

去抖动是一种用于限制函数触发速率的技术。您不是立即调用该函数，而是等待一段时间不活动后再执行该函数。如果在延迟结束之前有另一个电话打入，计时器将重置。

为什么要使用去抖动？

useref 的作用

在 react 中，useref 是一个钩子，允许您在渲染之间保留可变值而不触发重新渲染。它本质上是一个保存可变值的容器。

为什么在这里使用 useref ？

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;

3. 使用 usecallback 处理更新

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

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

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

结论

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

要点：

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

文章推荐