React Context实现用户帖子跨路由删除同步 解决内存与分页问题

解决方案 #

一、解决内存随使用时间线性增长的问题 #

核心思路是给Context缓存加淘汰规则，同时优化存储体积：

• 给Context的存储结构增加LRU（最近最少使用）淘汰机制：
  1. 每个用户对应的帖子存储项新增lastAccessTime字段，每次调用getUserPosts时更新该字段为当前时间戳
  2. 给缓存设置最大用户数阈值（比如10-15个，可根据业务调整），每次更新缓存时检查当前存储的用户总数，超过阈值则删除lastAccessTime最早的用户的所有帖子数据
• 优化单条帖子的存储字段：仅保留列表渲染、删除逻辑需要的核心字段（postId、内容、发布时间、交互状态等），接口返回的冗余字段不存入Context，进一步降低内存占用
• 可选优化：给单用户帖子列表也设置最大长度阈值（比如200条），超过阈值时删除最早的历史帖子，避免单个用户的帖子量过大占用内存，用户翻到更早内容时再重新拉取即可，对体验影响极小

二、解决分页实现 + 列表渲染性能问题 #

第一步：改造Context存储结构与对应逻辑

原存储结构为Record<UserId, Post[]>，调整为如下结构：

interface UserPostStore {
  list: Post[] // 已拉取的帖子列表
  nextCursor: string | null // 下一页分页游标
  hasMore: boolean // 是否还有更多未拉取的内容
  isLoading: boolean // 当前是否正在拉取新页，避免重复请求
  lastAccessTime: number // LRU淘汰用的访问时间戳
}
// 总存储结构变为 Record<UserId, UserPostStore>

同步修改addUserPosts对应的reducer逻辑：每次拉取到新页帖子时，将新数据追加到list末尾，同时更新nextCursor、hasMore、isLoading字段即可。原有的deleteUserPost逻辑无需大幅改动，仅需删除对应list中的目标postId项即可，依然满足跨路由同步删除的需求。

第二步：优化列表组件实现与渲染性能

改造后的组件代码示例如下：

import React, { useCallback, memo, useContext } from 'react';

const PostCard = memo(({ post }) => {
  // 单卡片渲染逻辑
  return <div>{/* 卡片内容 */}</div>
});

const UserPosts = memo(({ userData }) => {
  const postsContext = useContext(UserPostsContext);
  const { list: posts, hasMore, nextCursor, isLoading } = postsContext.getUserPosts(userData.id);

  const getMorePosts = useCallback(async () => {
    if (!hasMore || isLoading) return;
    // 可以先dispatch action把isLoading设为true
    const { posts: newPosts, nextCursor: newCursor } = await fetchPostsFromDB(userData.id, nextCursor);
    postsContext.addUserPosts(userData.id, newPosts, {
      nextCursor: newCursor,
      hasMore: newPosts.length > 0
    });
  }, [userData.id, hasMore, nextCursor, isLoading, postsContext]);

  const renderItem = useCallback(({ item }) => <PostCard post={item} />, []);
  const keyExtractor = useCallback((item) => item.id, []);

  return (
    <CardList
      data={posts}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      onEndReached={getMorePosts}
      onEndReachedThreshold={0.3} // 滚动到剩余30%内容时触发下一页加载
      // 固定卡片高度时加上getItemLayout能大幅提升虚拟滚动性能
      getItemLayout={(data, index) => ({ 
        length: CARD_FIXED_HEIGHT, 
        offset: CARD_FIXED_HEIGHT * index, 
        index 
      })}
    />
  );
});

核心优化点：

• 所有回调函数用useCallback包裹，子组件用memo包裹，避免不必要的重渲染
• 复用FlatList/CardList的虚拟滚动能力，只要keyExtractor、getItemLayout等参数配置正确，即使存了数百条帖子也不会出现性能问题
• 分页逻辑和Context缓存完全解耦，拉取到的新数据自动存入缓存，重复进入同一用户主页时直接复用已缓存的内容和分页状态，无需重复请求

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