React 防抖 Hook: useDebounce 实现函数延迟执行

这段代码是一个自定义的 React Hook，名为 useDebounce，用于实现函数的防抖功能。

首先，该 Hook 中使用了 React 中的三个 Hook: useEffect、useCallback 和 useRef。其中，useEffect 用于在组件挂载或更新时更新 current.fn 的值；useCallback 用于返回一个 memoized（记忆化）的函数，以避免在每次渲染时都创建新的函数；useRef 则用于创建一个可变的对象，其中包含了传入的 fn 函数和一个计时器 timer。

接着，该 Hook 中定义了一个名为 f 的函数，它接收任意个参数。函数体中，如果 current.timer 已经存在，则清除计时器；然后，使用 setTimeout 函数创建一个计时器，并在指定的延迟时间后执行 current.fn 函数。这样，每次调用 f 函数时，都会重置计时器，并在延迟时间后执行传入的函数，从而实现了防抖的效果。

最后，该 Hook 返回了 f 函数，以便在组件中使用。调用该函数时，会返回一个具有防抖功能的函数，可以用于处理用户输入、滚动事件等操作。

示例代码:

import { useEffect, useCallback, useRef } from 'react';

function useDebounce(fn, delay) {
  let { current } = useRef({ fn, timer: null });
  useEffect(() => {
    current.fn = fn;
  }, [current, fn]);
  return useCallback(function f(...args) {
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(() => {
      current.fn.call(this, ...args);
    }, delay);
  }, [current, delay]);
}

export default useDebounce;

使用示例:

import useDebounce from './useDebounce';

function MyComponent() {
  const handleInputChange = useDebounce((value) => {
    // 处理用户输入
    console.log('输入值:', value);
  }, 500);

  return (
    <input
      type='text'
      onChange={(e) => handleInputChange(e.target.value)}
    />
  );
}

在这个示例中，handleInputChange 函数使用了 useDebounce Hook，将用户输入的延迟时间设置为 500 毫秒。这意味着，只有在用户停止输入 500 毫秒后，才会触发 handleInputChange 函数，从而避免了频繁地执行处理函数，提高了用户体验和性能。