如何在 React 中实现一个防抖（debounce）的搜索输入框？

如何在 React 中实现一个防抖（debounce）的搜索输入框？

回答与解析：

在 React 中实现防抖搜索输入框，可以避免用户每输入一个字符就立即触发搜索请求，从而减少不必要的 API 调用，提升性能。

实现方式：

1. 使用 useState 管理输入值；
2. 使用 useRef 保存防抖定时器；
3. 利用 useEffect 或封装自定义 Hook 来处理防抖逻辑；
4. 在用户停止输入一段时间后（如 300ms）才触发搜索。

示例代码：

import { useState, useRef, useEffect } from 'react';

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const debounceRef = useRef(null);

  useEffect(() => {
    // 每次 inputValue 变化时，清除之前的定时器
    if (debounceRef.current) {
      clearTimeout(debounceRef.current);
    }

    // 设置新的定时器
    debounceRef.current = setTimeout(() => {
      console.log('执行搜索:', inputValue);
      // 此处可调用 API 进行搜索
    }, 300);

    // 组件卸载或 inputValue 变化前清理定时器
    return () => {
      if (debounceRef.current) {
        clearTimeout(debounceRef.current);
      }
    };
  }, [inputValue]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="输入搜索关键词..."
    />
  );
}

进阶建议：

• 可封装为自定义 Hook（如 useDebounce）提高复用性；
• 若使用第三方库（如 lodash），可直接使用 _.debounce，但需注意在函数组件中正确绑定（避免每次渲染都创建新函数）。

注意事项：

• 防抖定时器必须在组件卸载时清除，防止内存泄漏；
• 防抖延迟时间应根据用户体验和接口响应合理设置（通常 200–500ms）。