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

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

回答：
可以在 React 中使用 useRef 和 useEffect 自定义 Hook 来实现防抖逻辑，避免在用户连续输入时频繁发送请求。

示例代码：

import { useState, useEffect, useRef } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  const handlerRef = useRef();

  useEffect(() => {
    // 清除上一次的定时器
    if (handlerRef.current) {
      clearTimeout(handlerRef.current);
    }
    // 设置新的定时器
    handlerRef.current = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // 清理函数：组件卸载或依赖变化时清除定时器
    return () => {
      if (handlerRef.current) {
        clearTimeout(handlerRef.current);
      }
    };
  }, [value, delay]);

  return debouncedValue;
}

// 使用示例
function SearchInput() {
  const [inputValue, setInputValue] = useState('');
  const debouncedSearchTerm = useDebounce(inputValue, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // 执行搜索请求
      console.log('Searching for:', debouncedSearchTerm);
      // fetch(`/api/search?q=${debouncedSearchTerm}`);
    }
  }, [debouncedSearchTerm]);

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

解析：

• 防抖（Debounce）的作用是在用户停止操作一段时间后再执行函数，适用于输入框搜索、窗口 resize 等高频事件。
• 使用 useRef 保存定时器 ID，避免每次渲染都创建新引用。
• useEffect 监听输入值变化，每次变化时清除旧定时器并设置新定时器。
• 自定义 Hook useDebounce 封装逻辑，提高复用性。
• 注意在组件卸载时清除定时器，防止内存泄漏。