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

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

回答：
可以使用自定义 Hook（如 useDebounce）结合 useEffect 和 useState 来实现防抖搜索。防抖的核心思想是：在用户停止输入一段时间（例如 500ms）后再触发搜索请求，避免频繁调用 API。

代码示例：

import { useState, useEffect } from 'react';

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, 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，接收原始值和延迟时间。
• 每当 inputValue 变化时，会启动一个新的定时器；如果在 delay 时间内再次变化，之前的定时器会被清除（通过 useEffect 的清理函数），从而确保只在用户停止输入后才更新 debouncedValue。
• 主组件监听 debouncedSearchTerm 的变化来执行实际搜索逻辑，有效减少不必要的网络请求或计算开销。

这种方式性能良好、逻辑清晰，且可复用于其他需要防抖的场景（如窗口大小调整、表单验证等）。