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

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

回答：
可以在 React 中使用自定义 Hook 结合 lodash 的 debounce 函数，或手动使用 setTimeout/clearTimeout 实现防抖逻辑。以下是使用自定义 Hook 的示例：

import { useState, useCallback, useEffect } 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="输入搜索关键词..."
    />
  );
}

解析：

• 防抖（Debounce） 的核心思想是：在用户停止输入一段时间（如 500ms）后再触发搜索，避免在用户快速输入过程中频繁发起请求。
• useDebounce 是一个自定义 Hook，它接收当前输入值和延迟时间，返回防抖后的值。
• 每次 inputValue 变化时，会启动一个新的定时器；如果在延迟时间内再次变化，则清除之前的定时器并重新计时。
• 一旦防抖值更新，useEffect 会监听该值并执行实际的搜索逻辑（如调用 API）。
• 这种方式能有效减少不必要的网络请求，提升性能和用户体验。