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

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

回答：
可以在 React 中使用自定义 Hook（如 useDebounce）结合 useEffect 和 setTimeout 来实现防抖搜索。核心思路是：当用户输入时，延迟一定时间后再触发搜索请求；如果在延迟期间用户继续输入，则清除之前的定时器并重新计时。

示例代码：

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

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 在此处发起 API 请求
      console.log('Searching for:', debouncedSearchTerm);
      // fetch(`/api/search?q=${debouncedSearchTerm}`);
    }
  }, [debouncedSearchTerm]);

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

解析：

• useDebounce Hook 接收一个值和延迟时间，返回防抖后的值。
• 每次输入变化时，会启动一个定时器，在指定延迟后更新防抖值。
• 如果在延迟结束前再次输入，上一个定时器会被清除（通过 useEffect 的清理函数），避免不必要的请求。
• 实际项目中常用于优化搜索、窗口大小调整、表单验证等高频触发场景，减少性能开销和服务器压力。