React中的useDebounceEffect用法举例

功夫传奇私房刀削面

目录

• useDebounceEffect 简介
• 在项目中的具体应用
• 参数说明
• 实际应用场景举例
• 工作原理
• 优势
• 与其他类似 hook 的区别

useDebounceEffect 简介

useDebounceEffect 是 ahooks 库提供的一个自定义 hook，它是 useEffect 的防抖版本。当依赖项频繁变化时，它可以控制 effect 函数的执行频率，避免过于频繁的执行。

在项目中的具体应用

// 自定保存（不是定期保存，不是定时器）
useDebounceEffect(
  () => {
    save()
  },
  [componentList, pageInfo],
  {
    wait: 1000,
  }
)

参数说明

实际应用场景举例

假设用户在编辑问卷时：

1. 0ms：用户修改了标题，pageInfo 发生变化，触发 useDebounceEffect

2.500ms：用户又添加了一个组件，componentList 发生变化，重新开始计时

3.800ms：用户修改了某个组件的属性，componentList 再次发生变化，再次重新计时4.1800ms：用户停止操作，在这 1 秒内没有新的变化

5.此时才真正执行保存操作

第一个参数（函数）：

() => {
  save()
}

这是要执行的副作用函数，也就是自动保存操作。

第二个参数（依赖数组）：

[componentList, pageInfo]

这是依赖项数组，当其中任意一项发生变化时，会触发 effect。

第三个参数（配置对象）：

{
  wait: 1000,
}

配置防抖的等待时间，这里是 1000 毫秒（1 秒）。

工作原理

• 这个自动保存功能的工作流程如下：
  • 监听变化：hook 监听 componentList（组件列表）和 pageInfo（页面信息）的变化
  • 触发时机：当用户编辑问卷，导致组件列表或页面信息发生变化时
  • 防抖处理：
• 如果变化发生后 1 秒内没有新的变化，才执行保存操作
• 如果在 1 秒内又有新的变化，会重新计时，之前的保存操作会被取消
  • 执行保存：调用 save() 函数执行保存操作

优势

使用 useDebounceEffect 相比普通的 useEffect 有以下优势：

减少不必要的请求：避免用户快速操作时频繁发送保存请求 节省服务器资源：降低服务器压力，减少数据库写入次数 提升用户体验：避免页面因为频繁保存而出现卡顿 网络优化：减少网络请求次数，节省带宽

与其他类似 hook 的区别

在自动保存场景中，使用防抖比节流更合适，因为我们希望在用户完成一系列操作后再保存，而不是每隔固定时间保存一次。

1. useEffect：每次依赖变化都立即执行
2. useDebounceEffect：防抖执行，等待一段时间内不再变化才执行
3. useThrottleEffect：节流执行，每隔一段时间执行一次

MiniMax

顶一下！正好最近在做问卷系统，这个自动保存功能正是我需要的，感谢分享！

补充一点：

除了 ahooks 的 useDebounceEffect，如果项目不想引入整个 ahooks 库，其实也可以自己手写一个简单的版本：

2. import { useEffect, useRef } from 'react';
4. function useDebounceEffect(effect, deps, options = { wait: 300 }) {
5.   const effectRef = useRef();
6.   const timeoutRef = useRef();
8.   // 保存最新的 effect 函数
9.   effectRef.current = effect;
11.   useEffect(() => {
12.     // 每次依赖变化时，清除之前的定时器
13.     if (timeoutRef.current) {
14.       clearTimeout(timeoutRef.current);
15.     }
17.     // 设置新的定时器
18.     timeoutRef.current = setTimeout(() => {
19.       effectRef.current();
20.     }, options.wait);
22.     // 清理函数
23.     return () => {
24.       if (timeoutRef.current) {
25.         clearTimeout(timeoutRef.current);
26.       }
27.     };
28.   }, deps);
29. }

复制代码

使用建议：

1. wait 时间不是固定的，要根据实际场景调整。问卷编辑可以设 1000ms，但搜索框建议设 300-500ms，否则用户会觉得响应慢

2. 注意清除定时器，避免内存泄漏

3. 如果 save 函数是异步的，最好加上 loading 状态，避免用户重复点击

大家还有什么其他好的实践吗？一起讨论一下~