React组件重渲染时如何保证定时器仅被初始化一次？

• 直接写在组件函数体内的逻辑：函数组件每次重渲染都会重新执行整个函数体，你声明的timerStarted、tid属于函数作用域内的普通变量，每次渲染都会被重新初始化，因此判断逻辑自然失效，还会导致重复创建多个定时器实例。
• 空依赖useEffect未触发的问题：空依赖useEffect本身只会在组件挂载时执行一次，和其他带依赖的useEffect完全无关，没有触发大概率是两个原因：
  1. timerStarted、tid还是声明在组件函数体内部，每次渲染重置后导致判断条件不符合
  2. 不必要的async立即执行函数包裹，若内部出现未捕获的异常会导致定时器逻辑未执行，你这段逻辑没有异步操作，完全不需要async包裹。

要保证定时器仅初始化一次且不受重渲染影响，需要用useRef存储定时器实例，useRef的current属性在组件全生命周期内不会随重渲染重置，修改它也不会触发组件重渲染，正好符合需求。

基础实现（无闭包问题场景） #

如果你的ReloadMessage函数不依赖组件内的state/props，或者依赖的都是静态值，可以直接用以下写法：

import { useRef, useEffect } from 'react';

function YourComponent() {
  // 用useRef存储定时器id，重渲染时不会重置
  const timerIdRef = useRef(null);

  useEffect(() => {
    // 仅挂载时执行一次，避免重复创建
    if (!timerIdRef.current) {
      timerIdRef.current = setInterval(ReloadMessage, 2000);
    }

    // 组件卸载时清理定时器，避免内存泄漏
    return () => {
      if (timerIdRef.current) {
        clearInterval(timerIdRef.current);
        timerIdRef.current = null;
      }
    };
  }, []); // 空依赖保证仅挂载执行一次

  // 其他组件逻辑...
}

兼容闭包场景 #

如果ReloadMessage需要读取组件内最新的state/props，为了避免定时器拿到旧的闭包值，可以额外用useRef存储函数的最新引用：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const timerIdRef = useRef(null);
  const reloadMessageRef = useRef(ReloadMessage);

  // 每次组件更新都同步最新的ReloadMessage引用，保证拿到最新的state/props
  useEffect(() => {
    reloadMessageRef.current = ReloadMessage;
  });

  useEffect(() => {
    if (!timerIdRef.current) {
      timerIdRef.current = setInterval(() => {
        reloadMessageRef.current();
      }, 2000);
    }

    return () => {
      clearInterval(timerIdRef.current);
      timerIdRef.current = null;
    };
  }, []);

  // 其他组件逻辑...
}

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