本文為開發開源項目的真實開發經歷，感興趣的可以來給我的項目點個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上定制，此處就不再贅述。