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

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

回答与解析：

在 React 中实现防抖搜索输入框，通常是为了避免用户每次输入都立即触发搜索请求（如调用 API），从而减少不必要的网络请求和提升性能。可以通过自定义 Hook 或直接使用 lodash 的 debounce 工具函数来实现。

方法一：使用自定义 Hook 实现 debounce

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="搜索..."
    />
  );
}

方法二：使用 lodash.debounce

npm install lodash.debounce

import { useState, useCallback } from 'react';
import debounce from 'lodash.debounce';

function SearchInput() {
  const [inputValue, setInputValue] = useState('');

  const handleSearch = useCallback(
    debounce((value) => {
      console.log('Searching for:', value);
    }, 500),
    []
  );

  const handleChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    handleSearch(value);
  };

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
      placeholder="搜索..."
    />
  );
}

解析要点：

• 防抖的核心思想是“延迟执行”，只有在用户停止输入一段时间后才真正触发搜索。
• 自定义 Hook 方式更可控，不依赖第三方库，适合对性能和包体积敏感的项目。
• 使用 lodash 的 debounce 更简洁，但需注意在组件卸载时取消 pending 的调用（useCallback + 依赖数组为空可避免重复创建 debounce 函数）。
• 切勿在 render 中直接创建 debounce 函数（会导致每次渲染都生成新函数），应使用 useCallback 或在组件外定义。