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

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

回答与解析：

在 React 中，防抖（debounce）常用于限制高频事件（如 input 的 onChange、窗口 resize、滚动等）的处理函数执行频率，避免性能问题或不必要的 API 调用。

实现方式（使用自定义 Hook）：

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

// 自定义 useDebounce 钩子
function useDebounce(callback, delay) {
  const debouncedFn = useCallback(
    debounce((...args) => callback(...args), delay),
    [callback, delay]
  );
  return debouncedFn;
}

// 使用示例：搜索输入框
function SearchInput() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  // 模拟搜索 API
  const fetchResults = async (searchTerm) => {
    const res = await fetch(`/api/search?q=${searchTerm}`);
    const data = await res.json();
    setResults(data);
  };

  // 防抖后的搜索函数
  const debouncedSearch = useDebounce(fetchResults, 500);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    if (value.trim()) {
      debouncedSearch(value);
    } else {
      setResults([]);
    }
  };

  return (
    <div>
      <input value={query} onChange={handleChange} placeholder="搜索..." />
      <ul>
        {results.map((item, index) => (
          <li key={index}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
}

关键点解析：

1. useCallback + lodash.debounce：确保防抖函数在组件重渲染时不会被重复创建，避免 debounce 失效。
2. 依赖项管理：debounce 函数的依赖（callback 和 delay）需正确传入 useCallback 的依赖数组。
3. 清理机制：lodash 的 debounce 返回的函数自带 cancel 方法，如需在组件卸载时取消未执行的调用，可结合 useEffect 返回清理函数（本例中若 fetchResults 有副作用需考虑）。
4. 替代方案：也可不依赖 lodash，手动实现 debounce，但需注意闭包和定时器清理。

注意事项：

• 避免在 render 函数中直接创建 debounce 函数，否则每次渲染都会生成新函数，导致防抖失效。
• 如果使用自定义 debounce 实现，记得在 useEffect 中返回清理函数调用 debouncedFn.cancel()。

这种方式能有效减少搜索请求次数，提升用户体验和性能。