react hooks 防抖

可以使用 `useCallback` 和 `useEffect` 来实现 React Hooks 防抖。

首先，我们需要使用 `useCallback` 来缓存一个函数，这个函数可以是我们需要防抖的函数。然后，我们在 `useEffect` 中监听这个函数依赖的变量，如果这个变量发生了变化，我们就会重新缓存这个函数，从而实现防抖的效果。

下面是一个示例代码：

import React, { useState, useCallback, useEffect } from 'react';

function DebouncedInput() {
  const [value, setValue] = useState('');
  
  const handleInputChange = useCallback((event) => {
    setValue(event.target.value);
  }, []);

  const debouncedHandleInputChange = useCallback(
    debounce(handleInputChange, 500),
    [handleInputChange]
  );

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

  return (
    <input type="text" value={value} onChange={debouncedHandleInputChange} />
  );
}

function debounce(func, delay) {
  let timeoutId;
  const debounced = (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
  debounced.cancel = () => {
    clearTimeout(timeoutId);
  };
  return debounced;
}

在上面的代码中，`debounce` 函数是一个通用的防抖函数，它接受一个函数和一个延迟时间作为参数，并返回一个新的函数，这个新函数会在延迟时间内只执行一次原来的函数。我们把 `handleInputChange` 函数作为参数传给 `debounce` 函数，得到一个新的函数 `debouncedHandleInputChange`，它就是我们需要防抖的函数。

在 `useEffect` 中，我们监听 `debouncedHandleInputChange` 函数的依赖变量 `handleInputChange`，如果这个变量发生了变化，就会重新缓存 `debouncedHandleInputChange` 函数。在组件卸载时，我们需要调用 `debouncedHandleInputChange.cancel()` 来取消防抖函数的执行。