防抖在搜索框中应基于input事件、时间窗口和AbortController实现闭环控制，每次执行读取最新值并中止旧请求，延迟设为300ms，组件卸载时清理资源。
防抖在搜索框输入中不是“等用户打完再发”，而是用时间窗口+请求生命周期控制，把高频输入压成一次有效请求，同时确保 UI 只显示最新结果——这才是真正减轻后端压力的关键。
必须监听 input 事件，而不是 keyup 或 change
keyup 会漏掉粘贴、中文上屏、语音输入；change 只在失焦时触发，完全失去实时性。input 事件能捕获所有值变更，但要注意：不能在防抖闭包里固化 input.value。
- ❌ 错误写法：
debounce(() => fetch(`/api?q=${input.value}`), 300)—— 创建防抖函数时就锁死了初始值 - ✅ 正确写法：
debounce(() => fetch(`/api?q=${encodeURIComponent(input.value)}`), 300)—— 每次执行都读取当前最新值
防抖 + AbortController 才算完整闭环
光靠 clearTimeout 只能取消定时器，但上一个 fetch 请求还在 pending 状态，可能晚返回并覆盖 UI，造成竞态。必须主动中止旧请求：
React Best Practices 2 0.1.0
下载
React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。
- 每次发起新请求前，先调用
controller.abort()（如果有旧 controller） - 新建
new AbortController()，把signal传给fetch(..., { signal }) - 在
catch中显式忽略AbortError，避免未处理异常干扰逻辑
延迟设为 200～400ms，300ms 是实测最优解
太短（如 100ms）挡不住正常打字节奏；太长（如 600ms）会让用户感觉卡顿。300ms 能覆盖主流输入场景：
- 桌面端英文快打（约 5 字/秒），基本不会触发多次请求
- 安卓拼音输入法上屏延迟通常在 200–350ms 区间，300ms 刚好兜住
- 用户输完“react”稍作停顿再按回车，建议框几乎无感知延迟
组件卸载时务必清理资源
React/Vue 等框架中，若请求未返回组件已销毁，继续更新状态会报 warning 甚至内存泄漏：
- React：在
useEffect清理函数中调用controller.abort() - Vue 3：在
onBeforeUnmount钩子中执行相同操作 - 纯 JS 场景：可用布尔标志位配合
if (isMounted) setState(...)，但AbortController更可靠
