react 防抖函数 usecallback

React 的 useCallback 是一个用于优化性能的 Hook，它的作用是返回一个记忆化的函数。当我们在创建一个函数时，如果不使用 useCallback，每次组件重新渲染时都会创建一个新的函数实例，这可能导致子组件的不必要渲染。

而使用 useCallback 可以确保只有在依赖项发生变化时才会创建新的函数实例。这样可以减少子组件的渲染，提高性能。

防抖函数的作用是在一定时间内，只执行最后一次触发的操作。在 React 中，我们可以结合 useCallback 和 useRef 来实现防抖函数。下面是一个示例代码：

import React, { useCallback, useRef } from "react";

function DebounceExample() {
  const debouncedFunction = useCallback(
    debounce(() => {
      console.log("Debounced function called");
      // 执行需要防抖的操作
    }, 300),
    []
  );

  return (
    <div>
      <input type="text" onChange={debouncedFunction} />
    </div>
  );
}

// 防抖函数
function debounce(func, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

在上面的代码中，我们通过 useCallback 创建了一个记忆化的 debouncedFunction。这个函数通过 debounce 函数进行了防抖处理，延迟执行需要防抖的操作。然后将这个函数传递给了 input 的 onChange 事件。

这样，当用户在输入框中输入时，只有在停止输入 300ms 后才会执行防抖的操作。

希望这个例子对你有帮助！如果有任何疑问，请随时提问。