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

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

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

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

function useDebounce(callback, delay) {
  const debouncedFn = useCallback(debounce(callback, delay), [callback, delay]);
  return debouncedFn;
}

function SearchInput() {
  const [query, setQuery] = useState('');

  const handleSearch = (value) => {
    console.log('执行搜索:', value);
    // 实际调用 API 或其他逻辑
  };

  const debouncedSearch = useDebounce(handleSearch, 500);

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value);
    debouncedSearch(value);
  };

  return <input value={query} onChange={handleChange} placeholder="搜索..." />;
}

解析：

• 防抖（debounce）的作用是在事件停止触发一段时间后再执行回调，常用于输入框搜索、窗口 resize 等高频事件，避免不必要的性能开销。
• 使用 useCallback 包裹 debounce 函数可防止每次渲染都创建新的防抖函数，避免内存泄漏和重复调用。
• 注意：在组件卸载时应取消防抖（如调用 debouncedFn.cancel()），否则可能在组件销毁后仍触发回调。可通过 useEffect 添加清理逻辑：

useEffect(() => {
  return () => {
    debouncedSearch.cancel();
  };
}, [debouncedSearch]);

这样既保证了性能优化，又避免了潜在的内存问题。