在 react hook 中配合防抖（debounce）与节流（throttle），核心做法是结合 useref 存储定时器或时间戳，并在 useeffect 的清理函数中重置状态，从而避免闭包陷阱和内存泄漏。对于搜索框等高频触发场景，使用防抖可以延迟执行直到用户停止输入；而对于滚动、窗口调整等持续事件，使用节流可以限制执行频率。通过封装自定义 hook，可以将这些逻辑复用并安全地集成到组件生命周期中。
useDebounce 如何处理搜索输入
实现 useDebounce 的关键在于利用 useRef 保存定时器 ID，确保每次输入都能清除上一次的定时器，只保留最新的执行计划。当输入值变化时，启动一个新的定时器，在指定延迟后调用回调函数。这种方式能有效减少 API 请求次数，提升用户体验。
import { useState, useEffect, useRef } from 'react';
function useDebounce(callback, delay) {
const timerRef = useRef(null);
useEffect(() => {
return () => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
};
}, []);
const debouncedCallback = (...args) => {
if (timerRef.current) {
clearTimeout(timerRef.current);
}
timerRef.current = setTimeout(() => {
callback(...args);
}, delay);
};
return debouncedCallback;
}
// 使用示例
function SearchInput() {
const [query, setQuery] = useState('');
const handleSearch = useDebounce((value) => {
console.log('Searching for:', value);
// 发起 API 请求
}, 300);
return (
<input
type="text"
onChange={(e) => {
setQuery(e.target.value);
handleSearch(e.target.value);
}}
/>
);
}
上述代码定义了一个通用的 useDebounce Hook，它接收一个回调函数和一个延迟时间。在 SearchInput 组件中，我们将 onChange 事件的处理函数绑定到这个 debounced 版本上。这样，即使用户快速连续输入，API 请求也只会在用户停止输入 300 毫秒后才会发出一次。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“Java免费学习笔记（深入）”；
useThrottle 如何优化滚动性能
实现 useThrottle 通常需要记录上一次执行的时间戳，并在每次触发时判断当前时间与上次执行时间的差值是否超过阈值。如果未超过阈值，则忽略本次触发；如果超过，则更新最后执行时间并执行回调。这种方法适用于需要频繁触发但无需每次都响应的场景，如滚动加载或鼠标移动跟踪。
import { useRef, useCallback } from 'react';
function useThrottle(callback, limit) {
const lastRunTime = useRef(0);
const timeoutRef = useRef(null);
const throttledCallback = useCallback((...args) => {
const now = Date.now();
const timeSinceLastRun = now - lastRunTime.current;
if (timeSinceLastRun >= limit) {
lastRunTime.current = now;
callback(...args);
} else if (!timeoutRef.current) {
timeoutRef.current = setTimeout(() => {
lastRunTime.current = Date.now();
timeoutRef.current = null;
callback(...args);
}, limit - timeSinceLastRun);
}
}, [callback, limit]);
return throttledCallback;
}
// 使用示例
function ScrollTracker() {
const handleScroll = useThrottle(() => {
console.log('Scroll position:', window.scrollY);
// 检查是否需要加载更多数据
}, 100);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll]);
return <div style={{ height: '2000px' }}>Scroll down</div>;
}
在这个例子中，useThrottle 确保了 handleScroll 回调最多每 100 毫秒执行一次。即使滚动事件以更高的频率触发，我们也只会按照设定的间隔进行处理，从而避免了因频繁计算导致的性能问题。注意这里使用了 useCallback 来稳定回调引用，防止不必要的重渲染。
React 中定时器清理为何至关重要
在 React 组件卸载或重新渲染时，如果不清理之前设置的定时器，会导致内存泄漏以及在不期望的时刻执行回调。这是因为 React 可能会在组件树发生变化时重新挂载或卸载组件，而未清理的定时器仍然指向旧的组件实例或状态，可能引发错误或不可预测的行为。因此，必须在 useEffect 的返回函数中清除所有相关的定时器资源。
