作为 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 封装了复杂的逻辑，使组件更干净、更易于维护。

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