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

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

回答与解析：
在 React 中，可以通过自定义 Hook 或结合 useRef 和 setTimeout 实现防抖。防抖的核心思想是：在用户停止输入一段时间后再执行搜索请求，避免因高频输入导致过多不必要的 API 调用。

示例代码（使用自定义 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) {
      // 执行搜索逻辑，例如调用 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（如 500ms）内再次输入，之前的定时器会被清除并重新计时。
• 仅当用户停止输入超过指定延迟后，debouncedSearchTerm 才会更新，从而触发搜索逻辑。
• 使用 useEffect 的清理函数确保组件卸载或依赖变化时清除未完成的定时器，防止内存泄漏。

这种方法既简洁又可复用，适用于任何需要防抖的场景（如窗口大小调整、滚动事件等）。