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

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

回答：
可以使用自定义 Hook（如 useDebounce）结合 useEffect 和 useState 来实现防抖搜索。具体做法是：监听输入值变化，通过 setTimeout 延迟触发实际搜索逻辑，并在组件卸载或输入变化时清除旧的定时器。

解析：
防抖的核心思想是“在用户停止输入一段时间后再执行操作”，避免频繁请求后端接口。在 React 中推荐封装一个 useDebounce 自定义 Hook：

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 请求
      fetch(`/api/search?q=${debouncedSearchTerm}`);
    }
  }, [debouncedSearchTerm]);

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

这种方式将防抖逻辑与 UI 解耦，代码可复用、可测试，且符合 React 的响应式编程模型。相比直接在 onChange 中写 setTimeout，使用 Hook 能更好地处理组件生命周期和依赖更新。