React中如何实现支持海量数据的双向无限滚动功能？

目前成熟的React生态库已经能直接覆盖你的需求，不用从零手写所有逻辑：

• react-virtuoso：对双向无限滚动场景适配度最高的虚拟列表库，原生支持上下双向加载、可视区外DOM自动卸载、滚动位置自动校准，直接配置窗口大小、加载阈值参数就能实现你要的「最多保留N页数据、超阈值自动淘汰旧页、往回滚自动重新加载被删页」逻辑，不用自己处理复杂的滚动跳变问题。
• @tanstack/react-virtual：Headless风格的虚拟滚动核心库，体积极小、灵活度极高，本身只提供虚拟滚动的位置计算能力，数据加载、淘汰逻辑可以完全自己掌控，适合有高度自定义交互需求的场景，API设计简洁，踩坑成本远低于完全从零实现。

注意：普通的单向无限滚动库（比如仅支持向下追加数据的轻量无限滚动组件）不满足需求，这类库既不支持DOM卸载也不支持向上回退加载，数据量过万后必然卡顿。

如果要完全自主开发，核心是做「滑动窗口式的数据+DOM双卸载」，重点注意以下几个环节：

• 核心状态设计
  不要用普通数组存储全量数据，维护一个固定容量的滑动窗口结构，窗口容量就是你设置的最大保留页数（比如5页共500条）。额外维护两个状态：当前窗口的起始页号startPage、结束页号endPage，初始值均为0，对应首屏加载的第0页100条数据；同时给每页数据绑定全局唯一的索引范围，比如第0页对应全局索引0-99，第1页对应100-199，避免数据错位。
• 加载触发逻辑
  不要用高频触发的原生scroll事件做判断，优先用IntersectionObserver在列表顶部、底部各放置一个透明哨兵元素，设置预加载阈值（比如哨兵距离视口还有200px时就触发加载）：
  • 底部哨兵触发时，判断当前窗口总页数如果小于阈值，直接请求下一页追加到列表尾部，endPage加1；如果总页数已经到阈值，追加新页的同时直接移除窗口最顶部的旧页数据，startPage加1
  • 顶部哨兵触发时，判断当前窗口总页数如果小于阈值，直接请求上一页插入到列表头部，startPage减1；如果总页数已经到阈值，插入新页的同时直接移除窗口最底部的旧页数据，endPage减1
• 滚动位置校准
  这是最容易出现体验bug的环节：每次在头部插入数据、或者移除任意一端的数据前，先记录当前滚动容器的scrollTop值和当前容器总高度，DOM更新完成后，根据本次操作带来的高度差手动修正scrollTop：比如顶部插入100条数据让总高度增加了4000px，就把新的scrollTop设为原scrollTop + 4000px；如果顶部移除100条让总高度减少了4000px，就把新的scrollTop设为原scrollTop - 4000px，保证用户视觉上不会出现列表跳变。
• 高度计算逻辑
  如果列表项高度不固定，不要写死行高，用ResizeObserver动态收集已经渲染过的列表项实际高度，存在Map缓存里；未加载的页面可以先用预估高度计算占位，等实际渲染完成后再修正高度值，避免滚动条长度跳变。
• 内存与性能优化
  被移出滑动窗口的数据不要保留引用，直接释放内存；如果要减少重复请求，可以加一个容量很小的LRU缓存（比如额外缓存最近被移除的2页数据），超过缓存容量的最久未访问数据直接清除，不要常驻内存。渲染层面只渲染当前滑动窗口内的DOM节点，非窗口区域全部用对应计算高度的空div占位，不要挂载多余DOM节点。
• 边界处理
  加请求锁，同一时间同一方向只允许一个加载请求pending，避免滚动时重复触发相同页码的请求；加载过程中暂时屏蔽对应方向的哨兵触发逻辑，同时可以在对应位置展示加载态提示。

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