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

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

回答：
在 React 中，可以通过自定义 Hook（如 useDebounce）结合 useCallback 和 useEffect 来实现防抖。防抖的核心思想是：在用户停止输入一段时间后再执行搜索请求，避免在每次输入时都发起 API 调用。

示例代码：

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);
    }
  }, [debouncedSearchTerm]);

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

解析：

• useDebounce 自定义 Hook 接收当前值和延迟时间，内部使用 setTimeout 延迟更新 debouncedValue。
• 每当 inputValue 改变，会重置计时器；只有在用户停止输入超过指定延迟（如 500ms）后，debouncedValue 才会更新。
• 在 SearchInput 组件中监听 debouncedSearchTerm 的变化，一旦变化就触发搜索逻辑，从而避免频繁请求。
• 注意 useEffect 中返回的清理函数会清除上一次的定时器，防止内存泄漏或旧值干扰。

这种方式适用于搜索框、窗口 resize、滚动监听等高频事件场景，有效提升性能和用户体验。