在useEffect中使用setInterval时，计时器变得疯狂

基础概念

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作，比如数据获取、订阅或手动更改 DOM 等。setInterval 是 JavaScript 中的一个全局函数，用于每隔指定的毫秒数重复执行一次函数。

相关优势

使用 useEffect 结合 setInterval 可以方便地在 React 组件中实现定时任务，例如轮询数据更新、动画效果等。

类型

• 一次性定时器：使用 setTimeout，只执行一次。
• 重复定时器：使用 setInterval，每隔一段时间重复执行。

应用场景

• 轮询数据更新
• 定时刷新页面
• 动画效果

问题描述

在 useEffect 中使用 setInterval 时，计时器可能会变得疯狂，即计时器执行的频率远超预期。

原因

1. 未清除定时器：每次组件重新渲染时，useEffect 都会重新执行，导致新的定时器被创建，而旧的定时器未被清除。
2. 依赖项问题：useEffect 的依赖项数组中未正确设置依赖项，导致 useEffect 在不必要的时候重新执行。

解决方法

1. 清除定时器：在 useEffect 中返回一个清除定时器的函数。
2. 正确设置依赖项：确保 useEffect 的依赖项数组中包含了所有需要监听的状态变化。

示例代码

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

function TimerComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 清除定时器
    return () => {
      clearInterval(intervalId);
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default TimerComponent;

参考链接

• React 官方文档 - useEffect
• MDN Web Docs - setInterval

通过上述方法，可以有效避免在 useEffect 中使用 setInterval 时计时器变得疯狂的问题。