React组件useEffect场景下避免使用let可变值相关问题咨询

原写法合规性判断 #

你的当前写法不符合React开发规范，存在明显隐患：

• 组件每次重渲染时，let声明的min、sec以及endTime都会被重新初始化，你当前用了空依赖的useEffect，仅在首次渲染后执行一次计时器逻辑，靠闭包捕获了首次渲染的min、sec变量，看似能正常运行，但本质是依赖闭包的巧合特性，一旦组件有其他状态触发重渲染，后续逻辑极易出现不可预期的问题，完全符合你提到的「useEffect内部变量每次渲染后丢失」的问题场景
• 直接修改let声明的可变值，不符合React单向数据流、状态可追溯的设计理念，后续调试难度会大幅提升

优化实现方案 #

遵循建议的核心逻辑是：组件内需要持久化的可变值，不要用let声明，值变更需要触发重渲染的场景存入useState，值变更不需要触发重渲染的场景存入useRef，以下是两种常用的合规实现：

方案1：useState托管计时状态（最符合React设计理念） #

直接把剩余分、秒作为状态管理，完全去掉外部可变的let变量：

import React, { useEffect, useState } from "react";
import "./Timer.scss";

interface ITimerProps {
  setValid: (valid: boolean) => void;
}

export const Timer = ({ setValid }: ITimerProps) => {
  const tokenTTL = 1;
  // 直接把计时值作为state管理，变更自动触发重渲染
  const [minutes, setMinutes] = useState(tokenTTL);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSec => {
        if (prevSec === 0) {
          setMinutes(prevMin => {
            const newMin = prevMin - 1;
            if (newMin === 0) {
              clearInterval(interval);
              setValid(false);
            }
            return newMin;
          });
          return 59;
        }
        return prevSec - 1;
      });
    }, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(interval);
  }, [setValid]);

  return (
    <p className="Timer">
      <span className="minutes">{minutes}</span>
      <span className="divider">:</span>
      {/* 补全秒数的前导0，优化展示效果 */}
      <span className="seconds">{seconds.toString().padStart(2, '0')}</span>
    </p>
  );
};

方案2：useRef存储可变中间值（适合轻量可变值场景） #

如果不想拆分太多状态，也可以用useRef存储计时的中间变量，变更ref.current属性不会触发重渲染，且值会在多次渲染之间持久化，不会出现丢失问题：

import React, { useEffect, useState, useRef } from "react";
import "./Timer.scss";

interface ITimerProps {
  setValid: (valid: boolean) => void;
}

export const Timer = ({ setValid }: ITimerProps) => {
  const tokenTTL = 1;
  const [minutes, setMinutes] = useState(tokenTTL);
  const [seconds, setSeconds] = useState(0);
  // 用ref存储可变的计时中间值，跨渲染持久化
  const timeRef = useRef({
    min: tokenTTL,
    sec: 0
  });

  useEffect(() => {
    const interval = setInterval(() => {
      timeRef.current.sec--;
      if (timeRef.current.sec === -1) {
        timeRef.current.sec = 59;
        timeRef.current.min--;
      }

      setMinutes(timeRef.current.min);
      setSeconds(timeRef.current.sec);

      if (timeRef.current.min === 0 && timeRef.current.sec === 0) {
        clearInterval(interval);
        setValid(false);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [setValid]);

  return (
    <p className="Timer">
      <span className="minutes">{minutes}</span>
      <span className="divider">:</span>
      <span className="seconds">{seconds.toString().padStart(2, '0')}</span>
    </p>
  );
};

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