当前位置：首页 > news >正文

合React宝宝体质的自定义防抖hook

news 来源：原创 2025/4/28 17:30:43

本文为开发开源项目的真实开发经历，感兴趣的可以来给我的项目点个star，谢谢啦~

具体博文介绍：
开源｜Documind协同文档（接入deepseek-r1、支持实时聊天）Documind 🚀 一个支持实时聊天和接入 - 掘金

为什么不推荐使用第三方库实现节流函数？

像节流防抖这类易实现的函数推荐手写而不使用库函数，为什么现在支持Tree Shaking按需引入还需要手写？因为可以根据实际情况高度定制和简化代码（体积更小）以及性能优化，当然手写不易实现的功能还是需要使用第三方库，所以我推荐采用混合策略：核心路径代码手写优化 + 复杂功能使用高质量小型库。

纯js实现一个基础防抖函数

function debounce(fn, delay) {
  let timer = null;
  const _debounce = function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
  return _debounce;
}

react实现一个基础防抖函数

import {useCallback, useRef} from "react";

export function useDebounce<
  T extends (...args: Parameters<T>) => ReturnType<T>,
>(callback: T, delay: number = 500) {
  const timeoutRef = useRef<NodeJS.Timeout>();

  return useCallback((...args: Parameters<T>) => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
    
    timeoutRef.current = setTimeout(() => {
      callback(...args);
    }, delay);
  }, [callback, delay]);
}

总结

React 版本的防抖钩子通过 useCallback 保持函数引用稳定避免子组件无效渲染，依赖数组自动更新最新回调函数和延迟参数，集成 React 生命周期自动清理定时器，配合 TypeScript 泛型保留完整类型提示，完美适配函数组件开发模式，从根本上解决了普通防抖函数在 React 中容易产生的闭包陷阱和内存泄漏问题。

以上demo都为基础版本，可以根据具体需求在demo上定制，此处就不再赘述。