useEffect里使用定时器和销毁定时器

`useEffect` 是 React Hooks 中的一个生命周期函数，用于处理副作用操作，比如订阅数据、设置定时器等。当你在组件中使用 `useEffect` 并在回调函数中设置了定时器，比如 `setTimeout` 或者 `setInterval`，通常你会在 `useEffect` 的清理函数（返回的数组第二个元素）中清除这个定时器，以防止在组件卸载或更新时造成未预期的行为。

举个例子：

import { useState, useEffect } from 'react';

function MyComponent() {
  const [timerRunning, setTimerRunning] = useState(false);
  let timerId;

  // 设置定时器
  useEffect(() => {
    if (timerRunning) {
      timerId = setTimeout(() => {
        console.log('Timer callback');
      }, 5000); // 每隔5秒执行一次
    }

    // 清理定时器
    return () => {
      clearTimeout(timerId); // 当组件卸载或 state 变化不再需要定时器时，清除它
    };
  }, [timerRunning]);

  // 控制定时器开关的按钮点击事件
  function toggleTimer() {
    setTimerRunning(!timerRunning);
  }

  return (
    <button onClick={toggleTimer}>
      {timerRunning ? '停止计时' : '开始计时'}
    </button>
  );
}

在这个例子中，`toggleTimer` 函数会切换 `timerRunning` 的状态，当 `timerRunning` 从 `true` 变为 `false` 时，`useEffect` 清理函数会被调用并清除定时器。