使用react钩子进行消弹或节流

import React, { useState, useEffect } from 'react';

const DebouncedComponent = () => {
  const [inputValue, setInputValue] = useState('');

  useEffect(() => {
    const debounceTimer = setTimeout(() => {
      // 执行相应的函数
      console.log('执行函数');
    }, 300);

    return () => {
      clearTimeout(debounceTimer);
    };
  }, [inputValue]);

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <input type="text" value={inputValue} onChange={handleInputChange} />
  );
};

export default DebouncedComponent;

import React, { useState, useEffect } from 'react';

const ThrottledComponent = () => {
  const [buttonClicked, setButtonClicked] = useState(false);

  useEffect(() => {
    const throttleTimer = setTimeout(() => {
      // 执行相应的函数
      console.log('执行函数');
      setButtonClicked(false);
    }, 300);

    return () => {
      clearTimeout(throttleTimer);
    };
  }, [buttonClicked]);

  const handleButtonClick = () => {
    if (!buttonClicked) {
      setButtonClicked(true);
    }
  };

  return (
    <button onClick={handleButtonClick}>Click Me</button>
  );
};

export default ThrottledComponent;