React Native：如何启动计时器，切换页面返回后仍同步倒计时？

阻止组件卸载不是最优方案——硬阻止会破坏正常的路由生命周期，还可能引发内存泄漏。正确的思路是将计时器的核心逻辑与UI组件解耦，让计时逻辑独立于组件的挂载/卸载状态，以下是具体实现方案：

1. 全局独立计时模块 + 状态订阅 #

将计时器的状态（剩余时间、运行状态）和控制逻辑抽离到全局模块中，不受组件生命周期影响：

示例全局计时服务 #

// utils/timerService.js
let intervalId = null;
let remainingTime = 0;
const listeners = [];

// 通知所有订阅者更新状态
const notifyListeners = () => {
  listeners.forEach(listener => listener(remainingTime));
};

// 启动倒计时
export const startTimer = (initialSeconds) => {
  remainingTime = initialSeconds;
  // 先清除已有定时器，避免重复启动
  if (intervalId) clearInterval(intervalId);
  
  intervalId = setInterval(() => {
    remainingTime -= 1;
    if (remainingTime <= 0) {
      clearInterval(intervalId);
      intervalId = null;
    }
    notifyListeners();
  }, 1000);
};

// 订阅计时状态
export const subscribeTimer = (listener) => {
  listeners.push(listener);
  // 订阅时立即同步当前状态
  listener(remainingTime);
  // 返回取消订阅的方法
  return () => {
    listeners.splice(listeners.indexOf(listener), 1);
  };
};

// 停止计时器
export const stopTimer = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

页面组件使用方式 #

// pages/TimerPage.js
import { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { startTimer, subscribeTimer } from '../utils/timerService';

const TimerPage = () => {
  const [timeLeft, setTimeLeft] = useState(0);

  useEffect(() => {
    // 订阅计时状态，组件卸载时取消订阅
    const unsubscribe = subscribeTimer(setTimeLeft);
    
    // 首次挂载时启动计时器（可根据业务逻辑调整触发时机）
    if (timeLeft === 0) {
      startTimer(60); // 初始60秒倒计时
    }

    return unsubscribe;
  }, []);

  return <Text>剩余时间：{timeLeft}秒</Text>;
};

export default TimerPage;

2. 基于时间戳的差值计算（更可靠） #

避免setInterval的计时漂移问题，同时支持App后台恢复后的准确计时：

优化后的计时服务 #

// utils/timerService.js
let endTimestamp = null;
const listeners = [];

const notifyListeners = () => {
  const remaining = endTimestamp 
    ? Math.max(0, Math.floor((endTimestamp - Date.now()) / 1000)) 
    : 0;
  listeners.forEach(listener => listener(remaining));
};

export const startTimer = (initialSeconds) => {
  endTimestamp = Date.now() + initialSeconds * 1000;
  notifyListeners();
};

export const subscribeTimer = (listener) => {
  listeners.push(listener);
  notifyListeners();
  return () => {
    listeners.splice(listeners.indexOf(listener), 1);
  };
};

组件内实时更新 #

const TimerPage = () => {
  const [timeLeft, setTimeLeft] = useState(0);

  useEffect(() => {
    const unsubscribe = subscribeTimer(setTimeLeft);
    // 每秒触发一次状态更新
    const updateInterval = setInterval(notifyListeners, 1000);

    if (timeLeft === 0) {
      startTimer(60);
    }

    return () => {
      unsubscribe();
      clearInterval(updateInterval);
    };
  }, []);

  return <Text>剩余时间：{timeLeft}秒</Text>;
};

3. 结合AppState处理后台场景（可选） #

如果需要处理App切换到后台的情况，可通过AppState监听后台停留时长，修正剩余时间：

import { AppState } from 'react-native';

useEffect(() => {
  let backgroundStart = 0;
  const handleAppStateChange = (nextState) => {
    if (nextState === 'background') {
      backgroundStart = Date.now();
    } else if (nextState === 'active' && backgroundStart) {
      // 减去后台停留的时间
      const backgroundDuration = Date.now() - backgroundStart;
      endTimestamp -= backgroundDuration;
      notifyListeners();
      backgroundStart = 0;
    }
  };

  const appStateSubscription = AppState.addEventListener('change', handleAppStateChange);
  return () => appStateSubscription.remove();
}, []);

核心总结 #

• 无需阻止组件卸载，组件只负责订阅状态+渲染UI，计时逻辑完全独立于组件生命周期
• 基于时间戳的方案比setInterval更稳定，能避免计时漂移，还能适配App后台场景
• 全局模块或状态管理工具（如Zustand、Redux）都能实现状态的跨组件共享

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