React：避免返回首页时重复触发useEffect中的setTimeout

这个问题其实很常见，核心原因是：当你从其他页面返回首页时，首页组件会重新挂载，而依赖为空数组的useEffect会在组件每次挂载时触发，所以里面的setTimeout会被重新设置，导致changeStyles1()重复执行。而changeStyles2()是同步执行，刚好符合你的需求——那我们只需要给setTimeout加个“首次执行”的限制就可以了。

具体解决方案：用useRef标记执行状态 #

useRef的特性是它的current属性在组件整个生命周期内都会保持不变，不会像状态变量一样在组件重新渲染时重置。我们可以用它来记录动画是否已经执行过：

import { useEffect, useRef } from 'react';

function Home() {
  // 创建ref来标记动画是否已执行
  const hasRunAnimation = useRef(false);

  useEffect(() => {
    // 保持原有的同步执行逻辑
    changeStyles2();

    // 仅当动画未执行过时，才设置定时器
    if (!hasRunAnimation.current) {
      const timer = setTimeout(() => {
        changeStyles1();
        // 执行后标记为已完成
        hasRunAnimation.current = true;
      }, 1000);

      // 清理函数：组件卸载时清除定时器，避免内存泄漏
      return () => clearTimeout(timer);
    }
  }, []);

  // 组件其余代码...
  return (
    {/* 页面内容 */}
  );
}

为什么这个方案有效？ #

• hasRunAnimation.current会在组件首次渲染时设为false，执行完changeStyles1()后变为true，即使组件后续重新挂载（路由返回），这个值也会保持true，所以不会再进入if逻辑设置新的定时器。
• 清理函数return () => clearTimeout(timer)能确保如果用户在1秒内离开首页，定时器会被清除，避免不必要的样式修改和内存泄漏。

额外提示 #

如果你的需求是跨会话也保持这个状态（比如用户关闭浏览器再打开首页，也不重复执行动画），可以把标记存在localStorage里：

useEffect(() => {
  changeStyles2();

  const hasRun = localStorage.getItem('animationHasRun');
  if (!hasRun) {
    const timer = setTimeout(() => {
      changeStyles1();
      localStorage.setItem('animationHasRun', 'true');
    }, 1000);
    return () => clearTimeout(timer);
  }
}, []);

不过这种场景比较少，大部分情况下用useRef就足够了。

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