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

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

回答与解析：

在 React 中实现防抖搜索输入框，可以使用自定义 Hook 或在组件中结合 useState、useEffect 和防抖函数。防抖的作用是限制用户频繁输入时触发搜索请求的频率，例如只在用户停止输入 300ms 后才发起 API 请求。

示例代码：

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

// 自定义防抖 Hook
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
}

function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const debouncedSearchTerm = useDebounce(inputValue, 300);

  // 仅当防抖后的值变化时才执行搜索
  useEffect(() => {
    if (debouncedSearchTerm) {
      console.log('执行搜索:', debouncedSearchTerm);
      // 这里可以调用 API：fetch(`/api/search?q=${debouncedSearchTerm}`)
    }
  }, [debouncedSearchTerm]);

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

export default SearchInput;

解析：

• useDebounce 是一个通用的防抖 Hook，接收一个值和延迟时间，返回防抖后的值。
• 当用户输入时，inputValue 会实时更新，但 debouncedSearchTerm 仅在最后一次输入后 delay 毫秒才更新。
• useEffect 监听 debouncedSearchTerm，仅在其变化时触发搜索逻辑，从而避免频繁请求。
• 使用 useCallback 或 useMemo 可进一步优化性能，但在本例中由于依赖关系清晰，当前写法已足够高效。

这种方法广泛应用于搜索建议、实时过滤等场景，能显著提升用户体验和减少服务器压力。