近期，不少 React 开发者在社区中反映了一个令人困惑的问题：当使用 useEffect 读取外部状态管理库（如 Redux、Zustand 或 Context）的值时，在 React Activity（例如通过 React Navigation 的 useFocusEffect 或原生平台的重显场景）重新显示后，useEffect 内部获取到的值竟然是旧的，而非最新的外部存储值。这一现象在复杂应用中尤为常见，轻则导致 UI 闪烁，重则引发数据不一致的 Bug。本文将深入剖析问题根源，并提供切实可行的修复策略。
现象重现：从一个典型场景说起
假设我们有一个购物车页面，使用 Zustand 管理购物车数量。页面通过 useEffect 监听外部存储的 cartCount，并在页面聚焦时发送一次日志。在首次加载时，日志正确显示当前数量；但通过导航跳转至其他页面再返回后，useEffect 中打印的 cartCount 却停留在了离开前的旧值，尽管外部存储中的值已经更新。开发者通常会第一时间检查依赖数组，但即使将 cartCount 加入依赖，问题依然存在。
这种“滞后”现象在 React 18 的并发模式下更为突出，因为渲染阶段可能被延迟或中断。但根本原因并非并发特性本身，而是 React 的渲染阶段与外部状态读取时机之间的微妙关系。
核心原因：渲染快照与 useEffect 的执行顺序
要理解这个问题，必须厘清 React 的渲染生命周期。当一个组件重新渲染时（例如因导航触发重显），React 会先执行函数组件体，此时 useEffect 尚未运行。组件体内所有直接读取的变量（包括外部存储的 store.getState()）都会捕获当前渲染快照下的值。随后，React 提交渲染结果到 DOM，并在提交后异步执行 useEffect。
但关键在于：外部存储的更新可能发生在渲染期间或渲染之后。如果外部存储的更新与组件重显同时发生（例如，导航触发了某个异步操作，该操作在组件渲染完成前更新了 store），那么 useEffect 中读取的 store 值可能仍然是渲染快照里的旧值，因为 useEffect 闭包捕获了渲染时的常量。更糟糕的是，如果依赖数组包含该值，React 会比较前后的引用是否变化；若外部存储更新导致引用变化，useEffect 会重新执行，但此时闭包内捕获的旧值已经在首次执行时被使用，导致一次“一次性的旧值读取”。
为什么在 Activity 重显时尤其明显？
React Activity 的重显通常伴随着组件重新挂载或状态重置。以 React Navigation 为例，useFocusEffect 内部实际上是通过 useIsFocused 状态驱动的。当屏幕重新获得焦点时，组件会重新渲染，但外部存储可能已经在前一个屏幕中发生了修改。如果外部存储的更新发生在组件重新渲染之前，一切正常；但如果更新发生在渲染过程中（比如在同一个时间切片内），就会出现上述的闭包问题。
此外，一些状态管理库（如 Redux 的 useSelector）依赖 React 的同步更新机制，会主动触发重渲染。而另一些库（如 Zustand 的 useStore）则默认采用 React 18 的并发安全方案，可能通过 useSyncExternalStore 保证一致性，但如果开发者直接调用 store.getState() 而非使用 hook，则完全隔离于 React 的调度系统，极易导致旧值问题。
解决方案：三种被验证的有效做法
1. 使用 useRef 保持最新引用
最直接的方案是使用 useRef 维护外部存储的最新引用，并在 useEffect 中读取 ref 的 current 值。这样闭包捕获的是 ref 对象本身（引用不变），而每次读取 ref.current 都能获取最新状态。例如：
const cartCountRef = useRef(store.getState().cartCount);
useEffect(() => {
const unsubscribe = store.subscribe(() => {
cartCountRef.current = store.getState().cartCount;
});
// 在 useEffect 中通过 ref.current 读取
console.log('Current cart count:', cartCountRef.current);
return unsubscribe;
}, []);
2. 利用 useSyncExternalStore 保证一致性
React 18 提供的 useSyncExternalStore 是官方推荐解决此类问题的标准方案。它保证组件在任何时刻读取的值都与 React 渲染阶段同步，且并发模式下不会产生撕裂。Zustand 的 useStore 实际上内部已经使用了该 hook，但如果你直接调用 store.getState()，请切换到 useStore 或自行封装：
import { useSyncExternalStore } from 'react';
function useCartCount() {
return useSyncExternalStore(
store.subscribe,
() => store.getState().cartCount,
() => store.getState().cartCount // 服务端渲染时的快照
);
}
3. 在 useEffect 中使用异步更新或延迟读取
如果无法修改状态管理库，可以考虑在 useEffect 内使用 setTimeout 或 requestAnimationFrame 延迟读取 store。但这治标不治本，且可能引入竞态条件，仅作为临时降级方案。
总结与建议
React Activity 重显后 useEffect 读取旧外部存储值的根本原因是：闭包捕获了渲染时刻的快照，而外部存储的更新时机与渲染阶段未对齐。推荐优先采用官方提供的 useSyncExternalStore 或状态管理库的 hook 方法。对于需要手动订阅的场景，useRef 配合 subscribe 是简单可靠的替代方案。
随着 React 18 的普及，开发者应更严格地遵守“读取状态使用 hook、副作用使用 useEffect”的原则，避免在组件体内直接解构外部存储的非响应式值。只有理解渲染与订阅的生命周期差异，才能彻底杜绝这类“幽灵旧值”问题。