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

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

回答与解析：

在 React 中，防抖（debounce）常用于限制高频触发的事件（如 input 输入、窗口 resize、滚动等），避免在短时间内频繁执行开销较大的操作（如 API 请求）。实现方式通常结合自定义 Hook 和 lodash 的 debounce 函数，或手动使用 setTimeout 实现。

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

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 = (value) => {
    console.log('API call with:', value);
    // 实际可在此处发起搜索请求
  };

  const debouncedSearch = useDebounce(handleSearch, 500);

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

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

关键点解析：

1. useCallback + debounce：确保 debounce 函数在组件重渲染时不会被重复创建，避免失效或内存泄漏。
2. 依赖项管理：useDebounce 的依赖应包含 callback 和 delay，确保逻辑正确。
3. 清理机制（可选）：若使用手动实现 debounce（不依赖 lodash），需在 useEffect 中返回清理函数清除定时器。
4. 性能优化：防抖可显著减少无效请求，提升用户体验和系统负载能力。

注意事项：

• 不要直接在 render 函数内创建 debounce 函数（会导致每次渲染都新建实例）。
• 如果使用 useEffect 监听 query 变化再调用 API，需配合防抖或节流，否则仍会高频触发。

此方案适用于搜索建议、表单校验、滚动/窗口 resize 监听等场景。