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

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

回答：
可以在 React 中使用自定义 Hook 或在组件内部使用 useRef 和 useEffect 结合 lodash 的 debounce 函数（或手动实现 debounce）来实现防抖。核心思路是将事件处理函数包裹在防抖函数中，并确保在组件卸载时取消未执行的防抖调用，避免内存泄漏。

示例代码（使用自定义 Hook）：

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

function useDebounce(callback, delay) {
  const debouncedFn = useCallback(
    debounce((...args) => callback(...args), delay),
    [callback, delay]
  );

  return debouncedFn;
}

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

  const handleSearch = useCallback((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="搜索..." />;
}

解析：

• 高频事件（如 input 输入）如果每次变化都触发 API 请求，会造成性能问题甚至服务器压力。
• 防抖（debounce）确保只有在用户停止输入一段时间（如 500ms）后才执行回调。
• 使用 useCallback 和 useRef（隐含在 debounce 内部）可以避免每次渲染都创建新的防抖函数，提升性能。
• 如果使用 lodash 的 debounce，其返回的函数自带 cancel 方法，可在组件卸载时调用以防止在已卸载组件上 setState。
• 本例封装为自定义 Hook，提高复用性和可读性。

注意事项：

• 不要直接在 render 或 JSX 事件中内联调用 debounce，否则每次渲染都会生成新实例，失去防抖效果。
• 若不想引入 lodash，可手动实现 debounce：

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}