React切换页面时如何保留组件全局状态与Firestore监听器

基于Firebase Firestore搭建类Gmail邮件系统，当前组件采用conversations -> conversation二级结构：

• 父组件conversations：负责拉取、存储Firestore中的联系人与会话列表
• 子组件conversation：每个实例对应单个会话，负责绑定该会话的Firestore消息实时监听器

站内路由切换时需要同时满足两个要求：

1. 已加载的会话数据持久留存，不随页面切换丢失
2. 已绑定的实时监听器持续运行，避免重复绑定解绑产生的额外开销与消息延迟

已尝试方案：通过单个全局Context统一存储所有监听器（规模可能较大）与对应会话状态
方案缺陷：任意单条新消息到达，都会触发全部conversation组件重渲染，性能损耗明显

• 是否存在组件永久保活的可行实现方案？
• 是否可以根据实际会话数量生成相互独立的全局Context？
• 该问题是否有可落地的解决路径？

组件保活实现 #

不需要特殊的"永久保活"黑科技，路由层面的保活逻辑完全可以满足需求：

• 路由渲染时不要直接卸载会话模块根组件，切换到其他页面时通过display: none的样式规则将会话模块移出可视区域即可。这种方式下组件实例、内存中存储的会话数据、已绑定的Firestore监听器都会完整保留，切回会话页面时不需要重新执行初始化拉取、监听器绑定逻辑。
• 不要把会话状态、监听器实例绑定到路由页面组件的局部state中，避免组件被意外卸载时状态被回收。

独立Context动态生成 #

完全支持按会话维度生成独立Context，从根源解决全量重渲染问题：

• 全局只维护一个会话ID与Context实例的映射Map，不需要提前硬编码所有Context。用户打开某一会话时，先检查Map中是否存在对应ID的Context，不存在就新建实例存入Map，每个Context只存储对应单会话的全量消息、监听器实例。
• 单条新消息到达时，只会触发订阅了对应会话Context的组件重渲染，其余会话组件完全不受影响，不会出现全量重渲染的问题。
• 监听器不需要全量提前绑定，采用懒加载+LRU保活策略：用户打开会话时才绑定监听器，离开会话后默认保留监听器，当保活的监听器数量超过阈值（比如最近20个活跃会话），自动解绑最早的非活跃会话监听器，避免监听器数量过多带来的内存占用、Firestore连接数超限问题。

额外性能优化 #

• 每个conversation子组件用React.memo做渲染拦截，仅当当前组件对应会话的ID、消息数据、未读状态变化时才触发重渲染。
• 父组件conversations存储的会话列表仅保留会话元信息（联系人名称、最后一条消息预览、未读数、更新时间），不要把单会话的全量消息存在父组件或根级全局Context中，全量消息仅存储在对应会话的独立Context里。
• 监听器的绑定、解绑逻辑统一收口到全局会话管理模块，不要分散在单个组件的useEffect卸载回调中，避免组件意外卸载时误删需要保活的监听器。

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