防抖函数在React中用于收敛高频操作，值防抖用useState+useEffect实现，函数防抖用useCallback+useRef实现，需避免现场调用debounce和误配leading/trailing，生产环境推荐使用ahooks。
防抖函数在 React 中的核心作用是把高频触发的操作（比如输入、resize、点击）收敛成低频执行，避免重复渲染、多余请求或卡顿。关键不是“能不能用”，而是“怎么用才不翻车”——很多失效案例都源于函数引用不稳定或状态闭包过期。
用 useState + useEffect 实现值防抖（适合搜索框、筛选器）
这是最直观、也最不容易出错的方式：把输入值作为依赖，让 useEffect 控制定时器生命周期。
- 每次 value 变化时，自动清除上一个定时器，再启动新的倒计时
- 只在停止输入 wait 毫秒后，才把最新值同步给下游逻辑（如请求、过滤）
- 适用于受控组件，天然兼容 React 状态流
示例代码：
const debouncedValue = useDebounce(value, 300); // ahooks 或自定义 Hook
useEffect(() => {
if (debouncedValue) {
fetchSuggestions(debouncedValue);
}
}, [debouncedValue]);
用 useCallback + useRef 实现函数防抖（适合按钮点击、提交）
当你要防抖的是“执行动作”本身（比如点击后发请求），而不是等待某个值稳定，就该用函数式防抖。重点是保持函数引用稳定，并始终拿到最新状态。
立即学习“前端免费学习笔记（深入）”；
- useCallback 确保防抖函数在整个组件生命周期内是同一个引用
- useRef 存储最新回调函数，解决闭包捕获旧 state 的问题
- 支持 cancel / flush，便于测试或手动干预
示例代码：
const handleClick = useDebounceFn(() => {
submitForm(formData);
}, { wait: 500 });
// 使用时直接传给 onClick
<Button onClick={handleClick.run}>提交</Button>
避开两个高频陷阱
这两个错误看似微小，却会让防抖完全失效：
-
不要在事件处理器里现场调用 debounce()：例如
onChange={() => debounce(handleSearch, 300)(e.target.value)}—— 每次渲染都新建一个 debounce 实例，前序定时器无法被清除 - 不要忽略 leading/trailing 配置语义：默认 trailing=true 表示只在停止后执行；若需首次立即响应（如按钮按下瞬间反馈），要设 leading=true，但注意它和 trailing 同时为 true 时，可能触发两次
选 ahooks 还是手写？
生产项目建议直接用 ahooks 的 useDebounce 或 useDebounceFn：
- 已内置清理逻辑、maxWait 容灾、类型安全、多端兼容（包括 React Native for OpenHarmony）
- API 清晰：值防抖返回防抖后的值，函数防抖返回 { run, cancel, flush } 对象
- 比手写更健壮，尤其在快速连续输入+组件卸载等边界场景下
