useDebounce 防抖 Hook
最后更新：2026-10-28
useDebounce 防抖 Hook
useDebounce 接收一个高频变化的值（如搜索框输入），延迟 N 毫秒后才返回「稳定版」值：期间值再变就重新计时。用它驱动请求可以大幅减少无效调用，是搜索、联想、窗口缩放场景的标配。
| 分组 | 组件模式 |
|---|---|
| 类型 | Hook |
| 引入版本 | React 16.8 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
function useDebounce(value, delay = 300) {
const [debounced, setDebounced] = useState(value)
useEffect(() => {
const t = setTimeout(() => setDebounced(value), delay)
return () => clearTimeout(t) // 值再变：清掉旧计时器
}, [value, delay])
return debounced
}⚙️ 参数
| value | 需要防抖的原始值，通常来自受控输入框的 state。 |
|---|---|
| delay | 防抖毫秒数，默认 300。值变化后静默超过该时长才返回新值。 |
返回值：返回延迟后的稳定值；原始值频繁变化期间它保持不变，停顿后才追上。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
连续快速输入时「防抖后」一行停滞不动，停手半秒后才追上最终输入——以它驱动的请求只会发最后一次。💡 要点
💡 提示 把 debounced 值作为 useEffect 的依赖，请求自然只在值「尘埃落定」后发一次。
ℹ️ 说明 防抖（debounce）等平静，节流（throttle）保节奏：搜索联想用防抖，滚动加载用节流。
⚠️ 注意 effect 里必须 clearTimeout 清理，否则组件卸载或值再变后旧计时器仍在跑。
🏷️ 组件模式相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 防抖和节流的区别？
A 防抖在停止变化后执行一次；节流按固定间隔执行。搜索输入用防抖，滚动/拖拽用节流。
Q delay 设多长合适？
A 搜索类 300-500ms 是常见区间；实时性要求高取小值，服务端成本高取大值，按接口表现权衡。
Q 为什么必须返回清理函数？
A value 每变一次 effect 就重跑，若不清掉旧 setTimeout，旧值会照常写入，防抖就失效了。
