React Native Expo 中倒计时数值无法渲染到UI的问题咨询

你原代码中的时分秒都是普通JavaScript变量，其变更无法触发React Native组件的重新渲染，同时定时器逻辑未和组件生命周期绑定，容易出现闭包陷阱、内存泄漏等问题，是导致UI无法更新的核心原因。

以下是可直接运行的完整实现：

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';

const CountdownTimer = () => {
  // 用状态存储时分秒，状态变更会触发UI重绘
  const [hours, setHours] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 初始化2小时倒计时截止时间
    const deadline = Date.now() + 2 * 60 * 60 * 1000;
    
    // 封装倒计时计算逻辑
    const calculateTime = () => {
      const now = Date.now();
      const distance = deadline - now;
      
      // 倒计时结束处理
      if (distance < 0) {
        setHours(0);
        setMinutes(0);
        setSeconds(0);
        return false;
      }
      
      const h = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const m = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const s = Math.floor((distance % (1000 * 60)) / 1000);
      
      // 更新状态触发UI刷新
      setHours(h);
      setMinutes(m);
      setSeconds(s);
      return true;
    };

    // 首次立即执行，避免首屏1秒空白
    calculateTime();
    // 启动每秒执行的定时器
    const counter = setInterval(() => {
      const isRunning = calculateTime();
      if (!isRunning) clearInterval(counter);
    }, 1000);

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

  // 数值格式化，补前导0
  const formatNum = (num) => num < 10 ? `0${num}` : num;

  return (
    <View style={styles.container}>
      <Text style={styles.timeText}>
        {`${formatNum(hours)}:${formatNum(minutes)}:${formatNum(seconds)}`}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    alignItems: 'center',
  },
  timeText: {
    fontSize: 32,
    fontWeight: 'bold',
  }
});

export default CountdownTimer;

你之前尝试失败的常见原因：

• 直接在组件顶层声明定时器，每次组件重渲染都会生成新的定时器，导致逻辑混乱
• useMemo仅用于缓存计算结果，只有依赖项主动变更才会重新计算，定时器触发的数值变更无法触发useMemo更新
• 状态更新时遇到闭包陷阱，定时器回调拿到的是初始化时的状态快照，无法获取最新值，把计算逻辑放在useEffect内部即可解决该问题

内容的提问来源于stack exchange，提问作者M.Kalidass