如何在 React 中实现组件的防抖（debounce）以优化频繁触发的搜索输入？

如何在 React 中实现组件的防抖（debounce）以优化频繁触发的搜索输入？

回答与解析：
在 React 中，为避免用户在输入框中频繁输入时多次触发搜索请求（如调用 API），可以使用防抖（debounce）技术：延迟执行函数，直到用户停止输入一段时间后再真正执行。

实现方式如下（使用自定义 Hook）：

import { useState, useEffect, useCallback } 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) {
      // 在这里发起搜索请求
      console.log('搜索:', debouncedSearchTerm);
      // fetch(`/api/search?q=${debouncedSearchTerm}`);
    }
  }, [debouncedSearchTerm]);

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

解析：

• useDebounce 是一个自定义 Hook，接收当前值和延迟时间，返回“防抖后”的值。
• 每当 inputValue 变化时，useEffect 会启动一个定时器；如果在 delay（如 500ms）内再次输入，前一个定时器会被清除并重新计时。
• 仅当用户停止输入超过 500ms 后，debouncedSearchTerm 才会更新，从而触发搜索逻辑。
• 这种方式显著减少了不必要的网络请求，提升性能和用户体验。

注意：防抖适用于“连续高频事件只关心最后一次结果”的场景（如搜索、窗口 resize）；若需“固定间隔执行”，应使用节流（throttle）。