React Native Expo用AppState实现后台计时器暂停后仍异常更新问题

问题根源 #

你遇到的问题是典型的React闭包陷阱：你注册AppState事件监听的时机是固定的，事件回调函数捕获的是注册时刻的Paused状态值，后续Paused更新为yes之后，回调函数里拿到的还是旧的no值，所以你写的Paused == "no"判断永远成立，才会触发setTime更新。同时你注册监听的useEffect没有添加状态依赖，Paused变化时不会重新绑定监听，也没有在暂停状态下正确移除监听。

核心修复步骤 #

1. 调整监听注册逻辑，添加状态依赖
   将原来只执行一次的监听注册逻辑，改为依赖Paused状态，每次Paused变化时重新绑定监听，保证回调函数拿到的永远是最新的状态值，暂停状态下直接移除监听。
   修改前代码：

useEffect(() => {
  Timer()
}, []);

function Timer(){
  if(Paused == "no"){
    AppState.addEventListener("change", handleAppStateChange);
    return () => AppState.removeEventListener("change", handleAppStateChange);
  } else{
    console.log("eVENT lISTNER")
  }
}

修改后代码：

useEffect(() => {
  // 仅未暂停状态下绑定AppState监听
  if (Paused === "no") {
    const handleAppStateChange = async (nextAppState) => {
      if (
        appState.current.match(/inactive|background/) &&
        nextAppState === "active"
      ) {
        const elapsed = await getElapsedTime();
        setTime(elapsed);
      }
      appState.current = nextAppState;
    };
    const subscription = AppState.addEventListener("change", handleAppStateChange);
    // 状态变化/组件卸载时移除监听
    return () => subscription.remove();
  }
}, [Paused]);

你也可以把handleAppStateChange放到useEffect内部，彻底避免外部函数的闭包问题。

2. 修正状态初始化和命名规范
   你当前Paused的初始值为空字符串，会导致初始逻辑判断异常，建议将初始值设为"yes"，同时推荐修改为布尔值类型，避免字符串拼写错误导致的逻辑问题：

// 修改前
const [Paused,isPaused] = useState("");
// 修改后 更清晰不易出错
const [isPaused, setIsPaused] = useState(true);

对应调整所有逻辑判断，把Paused == "no"改为!isPaused，Paused == "yes"改为isPaused即可。

3. 可选优化：补充切后台的时间记录逻辑
   当前你只在点击启动按钮时记录开始时间，如果应用在运行过程中切后台，建议同步更新一次存储的时间，避免长时间后台运行出现时间计算偏差：

// 在handleAppStateChange里补充切后台的逻辑
if (nextAppState.match(/inactive|background/) && Paused === "no") {
  recordStartTime()
}

其他注意事项 #

• 你当前的时间计算逻辑是直接用启动时间到当前时间的差，如果存在暂停后重新启动的场景，建议额外存储暂停前已经累计的时长，避免暂停期间的时间被算入总时长。
• 重置、完成计时器时记得调用AsyncStorage.removeItem("@start_time")清理存储的时间，避免旧数据干扰后续计时。

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