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

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

回答：
可以在 React 中使用自定义 Hook 结合 lodash 的 debounce 函数，或手动使用 setTimeout/clearTimeout 来实现防抖搜索输入框。以下是一个不依赖第三方库的实现示例：

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：封装了防抖逻辑，监听输入值变化，并在指定延迟（如 500ms）后更新防抖后的值。
• useEffect 清理函数：每次 value 变化时，上一个 setTimeout 会被清除，确保只有最后一次输入后延迟执行。
• 性能优化：配合 useCallback 可进一步优化，避免子组件不必要的重渲染。

这种方法适用于搜索框、表单校验、窗口 resize 等需要延迟响应用户操作的场景。