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

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

回答：
可以通过自定义 Hook 或在组件中使用 lodash 的 debounce 函数来实现防抖。例如，使用自定义 Hook：

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

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

const 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）的作用是：在事件被频繁触发时，仅在最后一次触发后等待指定时间（如 500ms）才执行回调函数。

上述实现通过 useCallback 和 lodash 的 debounce 函数封装成一个可复用的 useDebounce 自定义 Hook，确保在组件重新渲染时不会重复创建防抖函数，同时保持对最新状态（如搜索词）的响应。

注意：务必在组件卸载时取消未完成的防抖调用，以避免内存泄漏或在已卸载组件上设置状态。使用 lodash 的 debounce 返回的函数自带 cancel 方法，可在 useEffect 中清理：

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