使用setTimeout避免在React中重新渲染

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

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [timer, setTimer] = useState(null);

  useEffect(() => {
    clearTimeout(timer); // 清除之前的定时器
    const newTimer = setTimeout(() => {
      // 延迟时间结束后执行重新渲染的操作
      // 这里可以更新组件的状态或属性
      setCount(count + 1);
    }, 200);
    setTimer(newTimer); // 更新定时器变量
  }, [count]); // 当count发生变化时触发重新渲染

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
};

export default MyComponent;