React Native全局变量使用更新方法及秒表后台运行问题求助

嘿，我完全懂你碰到的麻烦——切换页面时组件会被卸载，原来组件里的定时器会被清掉，state也跟着重置，所以切回来秒表就停了。不用愁，咱们不用生硬的全局变量，而是用全局服务/状态管理来托管秒表的核心逻辑，这样不管组件在不在页面上，秒表都能继续跑起来。

下面给你两种实用方案，从快速上手到规范进阶：

方案一：全局服务模块（快速搞定） #

先建一个独立的秒表服务文件，比如stopwatchService.js，把定时器、时间状态都放在这里，脱离组件的生命周期：

// stopwatchService.js
let intervalId = null;
let elapsedTime = 0; // 记录已流逝的总秒数
let listeners = []; // 用来通知组件更新时间

// 把秒数格式化为HH:MM:SS
const formatTime = (seconds) => {
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const secs = seconds % 60;
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
};

// 启动秒表
const start = () => {
  if (!intervalId) {
    intervalId = setInterval(() => {
      elapsedTime += 1;
      // 通知所有监听的组件更新时间
      listeners.forEach(callback => callback(formatTime(elapsedTime)));
    }, 1000);
  }
};

// 停止秒表
const stop = () => {
  if (intervalId) {
    clearInterval(intervalId);
    intervalId = null;
  }
};

// 重置秒表
const reset = () => {
  stop();
  elapsedTime = 0;
  listeners.forEach(callback => callback(formatTime(elapsedTime)));
};

// 订阅时间变化，组件用这个来同步UI
const subscribe = (callback) => {
  listeners.push(callback);
  // 立即返回当前时间，避免UI初始空白
  callback(formatTime(elapsedTime));
  // 返回取消订阅的方法，防止内存泄漏
  return () => {
    listeners = listeners.filter(cb => cb !== callback);
  };
};

export default { start, stop, reset, subscribe };

然后修改你的Record组件，让它依赖这个全局服务：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import stopwatchService from './stopwatchService';

export default class Record extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stopwatchStart: false,
      stopWatchTime: '00:00:00'
    };
    this.unsubscribe = null;
  }

  componentDidMount() {
    // 订阅秒表时间变化，更新组件state
    this.unsubscribe = stopwatchService.subscribe((time) => {
      this.setState({ stopWatchTime: time });
    });
  }

  componentWillUnmount() {
    // 组件卸载时取消订阅，避免内存泄漏
    if (this.unsubscribe) {
      this.unsubscribe();
    }
  }

  toggleStopwatch() {
    if (!this.state.stopwatchStart) {
      stopwatchService.start();
      this.setState({ stopwatchStart: true });
    } else {
      stopwatchService.stop();
      this.setState({ stopwatchStart: false });
    }
  }

  resetStopwatch() {
    stopwatchService.reset();
    this.setState({ stopwatchStart: false });
  }

  render() {
    return (
      <View style={{ padding: 20, alignItems: 'center' }}>
        <Text style={{ fontSize: 32, marginBottom: 20 }}>{this.state.stopWatchTime}</Text>
        <TouchableOpacity 
          onPress={() => this.toggleStopwatch()}
          style={{ padding: 10, backgroundColor: '#2196F3', borderRadius: 5, marginBottom: 10 }}
        >
          <Text style={{ color: 'white' }}>{this.state.stopwatchStart ? '停止' : '开始'}</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          onPress={() => this.resetStopwatch()}
          style={{ padding: 10, backgroundColor: '#F44336', borderRadius: 5 }}
        >
          <Text style={{ color: 'white' }}>重置</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

方案二：React Context（更贴合React生态） #

如果你的应用以后会变复杂，用Context来管理全局状态会更规范，也更符合React的设计思路：

1. 先创建秒表Context：

// StopwatchContext.js
import React, { createContext, useState, useEffect, useCallback } from 'react';

const StopwatchContext = createContext();

export const StopwatchProvider = ({ children }) => {
  const [elapsedTime, setElapsedTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  // 定时器逻辑，依赖isRunning状态自动启停
  useEffect(() => {
    let intervalId = null;
    if (isRunning) {
      intervalId = setInterval(() => {
        setElapsedTime(prev => prev + 1);
      }, 1000);
    }
    // 组件卸载或isRunning变化时清理定时器
    return () => clearInterval(intervalId);
  }, [isRunning]);

  // 格式化时间的工具函数
  const formatTime = useCallback((seconds) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
  }, []);

  // 封装操作方法
  const start = useCallback(() => setIsRunning(true), []);
  const stop = useCallback(() => setIsRunning(false), []);
  const reset = useCallback(() => {
    setIsRunning(false);
    setElapsedTime(0);
  }, []);

  return (
    <StopwatchContext.Provider value={{
      time: formatTime(elapsedTime),
      isRunning,
      start,
      stop,
      reset
    }}>
      {children}
    </StopwatchContext.Provider>
  );
};

export default StopwatchContext;

2. 在App.js里用Provider包裹整个应用：

import { StopwatchProvider } from './StopwatchContext';
import { NavigationContainer } from '@react-navigation/native';
// 导入你的导航组件

export default function App() {
  return (
    <StopwatchProvider>
      <NavigationContainer>
        {/* 你的导航栈和其他组件 */}
      </NavigationContainer>
    </StopwatchProvider>
  );
}

3. 改造你的Record组件（类组件版本）：

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import StopwatchContext from './StopwatchContext';

export default class Record extends Component {
  static contextType = StopwatchContext;

  render() {
    const { time, isRunning, start, stop, reset } = this.context;
    return (
      <View style={{ padding: 20, alignItems: 'center' }}>
        <Text style={{ fontSize: 32, marginBottom: 20 }}>{time}</Text>
        <TouchableOpacity 
          onPress={() => isRunning ? stop() : start()}
          style={{ padding: 10, backgroundColor: '#2196F3', borderRadius: 5, marginBottom: 10 }}
        >
          <Text style={{ color: 'white' }}>{isRunning ? '停止' : '开始'}</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          onPress={reset}
          style={{ padding: 10, backgroundColor: '#F44336', borderRadius: 5 }}
        >
          <Text style={{ color: 'white' }}>重置</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

核心原理说明 #

• 把秒表的核心逻辑（定时器、时间状态）从组件中抽离，放到全局作用域或Context里，这样组件卸载时，核心逻辑不会被销毁。
• 组件通过订阅/Context获取最新时间，保证UI和全局状态同步。
• 方案一里要记得取消订阅，方案二里Context会自动处理生命周期，都能避免内存泄漏。

内容的提问来源于stack exchange，提问作者Z.T