React聊天应用新旧消息流转及历史消息跳转后消息处理方案求助

方案一：拆分状态，分离视图与实时消息池 #

将原有的单一messages状态拆分为两个独立状态，明确职责边界：

• currentViewMessages：当前页面展示的消息列表（可能是指定历史时段或最新消息）
• latestMessages：实时维护的最新消息池，始终同步后端最新消息内容

各场景处理逻辑： #

• 进入聊天室：加载25条最新消息，同时赋值给currentViewMessages和latestMessages
• 无限滚动加载：仅当currentViewMessages与latestMessages的头部对齐（即处于最新视图）时，将加载的历史消息追加到currentViewMessages开头，同步更新latestMessages
• 发送消息：
  1. 用临时id乐观更新latestMessages
  2. 若当前处于最新视图（currentViewMessages末尾与latestMessages末尾一致），同步更新currentViewMessages
  3. 收到后端返回消息后，替换latestMessages中的临时消息，同步更新currentViewMessages（如果是最新视图）
• 接收消息：
  1. 获取消息内容后追加到latestMessages
  2. 若当前处于最新视图，直接追加到currentViewMessages末尾；否则显示「有新消息」提示
• 跳转历史消息：清空currentViewMessages并加载对应时段的历史消息，latestMessages保持不变；用户切回最新视图时，将currentViewMessages替换为latestMessages

方案二：新增状态标记，基于视图状态做条件处理 #

保留单一messages状态，新增两个辅助状态：

• isViewingLatest：布尔值，标记当前是否处于最新消息视图
• unreadLatestMessages：数组，存储用户查看历史消息期间收到的新消息

各场景处理逻辑： #

• 进入聊天室：设置isViewingLatest = true，加载25条最新消息到messages
• 跳转历史消息：设置isViewingLatest = false，清空messages并加载对应时段的历史消息，重置unreadLatestMessages为空数组
• 发送消息：
  1. 用临时id乐观更新messages（仅当isViewingLatest = true时）
  2. 调用API获取后端消息后，若isViewingLatest = true，替换messages中的临时消息；否则将消息存入latestMessages池（额外维护）
• 接收消息：
  1. 获取消息内容后，若isViewingLatest = true，直接追加到messages；否则存入unreadLatestMessages
  2. 显示未读消息数量提示，用户点击切回最新视图时，将messages替换为latestMessages + unreadLatestMessages，同时设置isViewingLatest = true，清空unreadLatestMessages

方案三：全量消息字典+视图筛选 #

维护一个以消息id为键的全量消息字典allMessages，同时用currentViewMessages存储当前视图需要展示的有序消息列表。

各场景处理逻辑： #

• 加载消息（最新/历史）：将返回的每条消息存入allMessages，根据当前视图的时间范围筛选并按时间排序，生成currentViewMessages
• 发送消息：
  1. 用临时id将消息存入allMessages，若处于最新视图，将其追加到currentViewMessages末尾
  2. 收到后端返回消息后，更新allMessages中对应临时id的条目，同步刷新currentViewMessages
• 接收消息：获取消息内容后存入allMessages，若处于最新视图，将其加入currentViewMessages末尾；否则记录未读标记
• 跳转历史消息：根据目标日期从allMessages中筛选出符合时间范围的消息，按时间排序后生成currentViewMessages

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