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

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

回答：
可以使用 useRef 和 useEffect 配合原生 setTimeout 实现防抖，或者使用 lodash 的 debounce 函数。以下是不依赖第三方库的实现方式：

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

function DebouncedSearchInput() {
  const [inputValue, setInputValue] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const debounceRef = useRef(null);

  useEffect(() => {
    // 清除上一次的定时器
    if (debounceRef.current) {
      clearTimeout(debounceRef.current);
    }
    // 设置新的定时器
    debounceRef.current = setTimeout(() => {
      setSearchTerm(inputValue);
    }, 500); // 防抖 500ms

    // 组件卸载或依赖变化时清理定时器
    return () => {
      if (debounceRef.current) {
        clearTimeout(debounceRef.current);
      }
    };
  }, [inputValue]);

  // 此处可调用 API：useEffect(() => { if (searchTerm) fetchData(searchTerm); }, [searchTerm]);

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

解析：

• 防抖（Debounce）是指在用户停止输入一段时间后才执行操作（如发起搜索请求），避免频繁触发。
• 使用 useRef 存储定时器 ID，确保在组件多次渲染时能正确清除之前的定时器。
• useEffect 监听 inputValue 变化，每次变化都清除旧定时器并设置新定时器。
• 清理函数（return 的函数）确保组件卸载时不会因定时器导致内存泄漏或状态更新错误。
• 相比于节流（throttle），防抖更适合搜索场景，因为用户通常希望在输入完成后再触发搜索。