React Native 开发实时时钟时 clearInterval 失效，已参考同类方案仍无效果

• 计时器创建逻辑写在组件函数体顶层，没有做单例托管：每次组件因为setTime触发重渲染时，都会新建一个全新的setInterval实例，旧的计时器引用会被直接覆盖，后续clearInterval拿到的timeVar只是当前渲染周期的临时变量，根本匹配不到所有正在运行的后台计时器，最终表现为清理失效
• 按钮事件写法语法错误：React组件的onPress属性需要传入函数作为回调，原代码直接传入了一个包含代码块的对象，内部的clearInterval和导航逻辑根本不会被执行
• 自定义封装的Interval函数存在硬逻辑错误：stop方法里调用clearInterval(timer)时传入的是整个ref对象，不是timer.current存储的真实计时器ID；isRunning判断时直接对比ref对象和布尔值，ref永远是真值，判断逻辑完全失效
• 缺少生命周期兜底清理：组件跳转到其他页面被卸载时，没有触发计时器清理逻辑，残留的后台计时器会持续触发状态更新，引发内存泄漏

无第三方依赖的原生实现 #

按照React Hooks的生命周期规则托管计时器引用，从根源上避免重复创建、清理失效的问题，可直接复用的代码如下：

import { useState, useEffect, useRef } from 'react';
import moment from 'moment';
import { View, Text, Button } from 'react-native';

const RealTimeClock = () => {
  const [displayTime, setDisplayTime] = useState(
    moment(new Date()).format('hh:mm A (DD/MM/YYYY)')
  );
  // 跨渲染周期留存计时器句柄，避免每次重渲染丢失引用
  const timerInstance = useRef(null);

  useEffect(() => {
    // 组件挂载后启动计时器，每分钟更新一次时间
    timerInstance.current = setInterval(() => {
      setDisplayTime(moment(new Date()).format('hh:mm A (DD/MM/YYYY)'));
    }, 60000);

    // 组件卸载时自动清理残留计时器，避免内存泄漏
    return () => {
      if (timerInstance.current) clearInterval(timerInstance.current);
    };
  }, []);

  const handleNavigate = () => {
    // 跳转前主动清理计时器
    if (timerInstance.current) {
      clearInterval(timerInstance.current);
      timerInstance.current = null;
    }
    // 此处补充跳转页面的导航逻辑
  };

  return (
    <View>
      <Text>{displayTime}</Text>
      <Button title="Take" onPress={handleNavigate} />
    </View>
  );
};

可直接使用的成熟第三方库 #

如果不想手动维护计时器逻辑，可以直接接入以下成熟方案：

• react-native-clock：开箱即用的实时时钟组件，支持自定义时间格式、灵活配置刷新频率，内置自动清理后台计时器的逻辑，无需手动处理setInterval相关操作
• expo-clock：面向Expo生态封装的时间组件，自动适配系统时区、支持跨页面时间同步，适合Expo项目零配置接入

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