用react框架写一个防抖函数

好的，以下是一个用 React Hooks 写的防抖函数：

import { useState, useEffect } from 'react';

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

这个函数接收两个参数，`value` 是需要防抖的值，`delay` 是防抖的时间间隔。它返回一个经过防抖处理的值，可以在组件中使用。

使用方法：在组件中调用 `useDebounce` 函数，并传入需要防抖的值和防抖的时间间隔，例如：

function MyComponent() {
  const [searchText, setSearchText] = useState('');
  const debouncedSearchText = useDebounce(searchText, 500);

  function handleSearchInput(event) {
    setSearchText(event.target.value);
  }

  return (
    <div>
      <input type="text" onChange={handleSearchInput} />
      <p>Search text: {debouncedSearchText}</p>
    </div>
  );
}

这个例子中，我们防抖了用户输入的搜索文本，500 毫秒之后才将其更新到组件中。这样可以避免用户短时间内频繁触发搜索操作。