用react框架写一个防抖函数

可以使用以下代码来实现防抖函数：

import { useRef, useEffect } from 'react';

function useDebounce(callback, delay) {
  const savedCallback = useRef();

  // 保存新回调
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // 建立事件处理器
  useEffect(() => {
    function handler(...event) {
      // 使用保存的回调
      savedCallback.current(...event);
    }

    // 如果有延迟值，则启动定时器
    if (delay !== null) {
      const id = setTimeout(handler, delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
}

你可以在你的组件中使用这个函数，并传入你想要进行防抖的回调函数和延迟时间（以毫秒为单位）。

例如：

import { useDebounce } from './useDebounce';

function MyComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  useDebounce(
    () => {
      // 这里是你想要进行防抖的代码
      console.log(`Searching for "${searchTerm}"`);
    },
    500, // 延迟 500 毫秒
  );

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={event => setSearchTerm(event.target.value)}
    />
  );
}

在这个例子中，每当输入框的值改变时，都会触发防抖函数。但是，由于设置了 500 毫秒的延迟，所以只有在用户停止输入后 500 毫秒才会执行代码。