ReactJS实现每5秒依次展示数组消息并清除定时器避免加速

核心实现思路 #

• 用useState维护当前显示的消息索引
• 用useRef存储定时器ID，确保能稳定访问并清除定时器
• 通过useEffect初始化定时器，并在组件卸载时自动清理
• 封装定时器启动函数，每次触发前先清除旧定时器，避免多个定时器叠加导致切换加速

完整组件代码 #

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

const Header = () => {
  const messages = ['a', 'b', 'c', 'd'];
  const [currentIndex, setCurrentIndex] = useState(0);
  const timerRef = useRef(null);

  // 切换到下一条消息
  const showNextMessage = () => {
    setCurrentIndex(prev => (prev + 1) % messages.length);
  };

  // 启动定时器（含旧定时器清理）
  const startTimer = () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
    timerRef.current = setInterval(showNextMessage, 5000);
  };

  // 组件挂载时初始化定时器，卸载时清理
  useEffect(() => {
    startTimer();
    return () => clearInterval(timerRef.current);
  }, []);

  // 可选：点击重置轮播（回到第一条并重启定时器）
  const handleRestart = () => {
    setCurrentIndex(0);
    startTimer();
  };

  return (
    <header>
      <p>{messages[currentIndex]}</p>
      {/* 按需添加重置按钮 */}
      <button onClick={handleRestart}>重置轮播</button>
    </header>
  );
};

export default Header;

关键细节说明 #

• 定时器叠加问题解决：每次调用startTimer时先清除已有定时器，不管是组件初始化还是用户点击触发，都能保证同一时间只有一个定时器在运行，避免切换速度越来越快
• 循环轮播：通过(prev + 1) % messages.length实现索引循环，当到最后一条消息后自动回到第一条
• 内存泄漏预防：useEffect的清理函数会在组件卸载时清除定时器，避免无用的定时器持续运行

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