react中用button写一个防抖示例

以下是在 React 中使用按钮实现防抖的示例：

import React, { useState } from 'react';
import { debounce } from 'lodash'; // 导入 debounce 函数

const Button = () => {
  const [count, setCount] = useState(0);

  // 使用 debounce 函数创建一个防抖点击函数
  const debouncedClick = debounce(() => {
    console.log('Button clicked!');
    setCount((prevCount) => prevCount + 1);
  }, 500);

  const handleClick = () => {
    debouncedClick(); // 调用防抖点击函数
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
      <p>Button clicked {count} times</p>
    </div>
  );
};

export default Button;

在这个示例中，我们在组件中定义了一个名为 `debouncedClick` 的防抖点击函数，并在按钮的 `onClick` 事件中调用它。每次点击按钮时，都会触发 `handleClick` 函数，将事件传递给 `debouncedClick` 函数进行防抖点击。在这个示例中，我们同样使用了 Lodash 库中的 `debounce` 函数来实现防抖。每次点击按钮时，会触发 `console.log` 输出一条消息，并将 `count` 值加 1，最后将 `count` 值渲染到页面上。