React中每隔3秒切换背景图，teaserAnimCount状态指数增长致崩溃求解决

嘿，这个问题我太熟悉了！我之前做轮播背景组件的时候也踩过一模一样的坑😅

问题根源 #

你遇到的teaserAnimCount指数增长（1→3→7→15...），核心原因是每次组件重新渲染时都创建了新的定时器，旧定时器没有被清除。举个例子：

1. 第一次组件渲染，创建了一个定时器，每3秒让teaserAnimCount+1；
2. 当状态更新后，组件重新渲染，又新建了一个定时器；
3. 现在有两个定时器同时运行，下一次触发时，每个定时器都会让状态+1，所以1+2=3；
4. 状态变3后组件再次渲染，又新增第三个定时器，下一次触发时三个定时器同时更新状态，3+4=7...以此类推，定时器数量越来越多，状态增长自然呈指数级，最后肯定会拖垮浏览器。

解决方案 #

要解决这个问题，关键是确保同一时间只有一个定时器在运行，并且在组件卸载时清除定时器，避免内存泄漏。下面分两种组件类型给出具体实现：

1. 函数组件（React Hooks）

用useEffect来管理定时器，空依赖数组确保只在组件挂载时创建一次定时器，同时返回清除函数：

import { useState, useEffect } from 'react';

function BackgroundSlider() {
  const [teaserAnimCount, setTeaserAnimCount] = useState(0);

  useEffect(() => {
    // 创建定时器，用函数式更新确保拿到最新状态
    const intervalId = setInterval(() => {
      setTeaserAnimCount(prevCount => prevCount + 1);
      console.log("teaserAnimCount:", teaserAnimCount);
    }, 3000);

    // 组件卸载或依赖变化时清除定时器
    return () => clearInterval(intervalId);
  }, []); // 空依赖数组，仅在组件挂载时执行一次

  // 根据count循环切换背景图的逻辑
  const images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
  const currentBg = images[teaserAnimCount % images.length];

  return (
    <div 
      className="background-container"
      style={{ backgroundImage: `url(${currentBg})` }}
    />
  );
}

2. 类组件

在componentDidMount中创建定时器，componentWillUnmount中清除，绝对不要在render方法里创建定时器：

class BackgroundSlider extends React.Component {
  state = {
    teaserAnimCount: 0
  };

  intervalId = null;

  componentDidMount() {
    this.intervalId = setInterval(() => {
      // 用函数式更新获取最新状态
      this.setState(prevState => ({
        teaserAnimCount: prevState.teaserAnimCount + 1
      }));
      console.log("this.state.teaserAnimCount:", this.state.teaserAnimCount);
    }, 3000);
  }

  componentWillUnmount() {
    // 组件卸载前清除定时器
    clearInterval(this.intervalId);
  }

  render() {
    const images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
    const currentBg = images[this.state.teaserAnimCount % images.length];
    
    return (
      <div 
        className="background-container"
        style={{ backgroundImage: `url(${currentBg})` }}
      />
    );
  }
}

额外注意点 #

更新状态时尽量用函数式更新（比如prevCount => prevCount +1），而不是直接写setTeaserAnimCount(teaserAnimCount +1)。因为定时器的回调函数会形成闭包，如果直接引用当前状态，可能拿到的是旧值，函数式更新能确保获取到最新的状态快照。

内容的提问来源于stack exchange，提问作者Guillaume