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

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

回答：
在 React 中实现防抖搜索输入框，通常使用自定义 Hook（如 useDebounce）结合 useState 和 useEffect 来延迟触发搜索请求。以下是示例代码：

import { useState, useEffect } 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 SearchBox() {
  const [inputValue, setInputValue] = useState('');
  const debouncedSearchTerm = useDebounce(inputValue, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 执行实际的搜索逻辑（如 API 调用）
      console.log('Searching for:', debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
      placeholder="Search..."
    />
  );
}

解析：

• 防抖原理：防抖是指在一定时间间隔内，若某个操作（如输入）持续触发，则仅在最后一次操作后延迟执行回调。这可以避免用户每输入一个字符就触发一次昂贵的搜索请求。
• useDebounce Hook：该 Hook 接收当前值和延迟时间，内部使用 setTimeout 延迟更新状态，并在组件卸载或依赖变化时清除定时器，防止内存泄漏。
• useEffect 依赖 debouncedSearchTerm：只有当防抖后的值真正变化时，才执行搜索逻辑，从而显著减少不必要的网络请求。
• 适用场景：适用于搜索建议、实时过滤、表单校验等高频输入场景。

这种方式兼顾性能与用户体验，是 React 中处理输入防抖的标准实践。