使用react-infinite-scroll-component加载视频时浏览器崩溃如何修复

• 全量渲染所有已加载的视频节点，每个HLS视频播放器需要占用大量内存维持流连接、视频解码，累计到50个左右内存占用超过浏览器阈值直接崩溃。类TikTok的短视频流从来不会同时渲染几十个视频节点，视口外的内容会被直接卸载释放资源。
• 现有加载逻辑存在性能缺陷：拉取到新数据后循环调用setData，每加1条数据就触发1次全组件重渲染，10条数据平白多触发9次无意义重渲染，额外消耗性能。
• 视口外的视频播放器没有做资源回收，哪怕用户看不到，依然在后台拉流、占用解码线程，内存占用只增不减。

1. 先修复基础代码bug #

调整数据加载逻辑，不要循环更新状态，拿到新数据后一次性合并，减少无意义重渲染：

const getMoreData = async () => {
  page = page + 1;
  const body = { current_page: page };
  const response = await axios.post("Api Link", body);
  const shorts = response.data.data.shots;
  // 用函数式更新一次性合并新老数据，避免循环setState
  setData(prevData => [...prevData, ...shorts]);
  // 接口返回数据不足10条时标记没有更多数据，停止触发加载
  if (shorts.length < 10) setHasMore(false);
}

渲染列表时给每个VideoPlayerShorts组件绑定视频唯一ID作为key，不要用数组下标当key，减少diff过程中的不必要重渲染。

2. 接入虚拟滚动解决DOM节点过多问题 #

你当前用的react-infinite-scroll-component只负责触发滚动加载逻辑，不会控制实际渲染的DOM数量，这是崩溃的核心诱因。
虚拟滚动（窗口化渲染）的逻辑是：无论加载了多少条数据，实际只渲染视口范围内+前后少量缓冲的节点，视口外的内容直接从DOM树移除，哪怕累计加载上千条视频，DOM中实际存在的视频节点永远只有3-5个，内存占用会下降90%以上。
实现类TikTok的竖屏全屏短视频流，直接用适配竖屏滚动场景的虚拟滚动库即可，不需要自己手动计算滚动位置和元素高度，核心参考实现：

// 替换原有的InfiniteScroll组件
<Virtuoso
  style={{ height: '100vh' }}
  data={data}
  endReached={() => hasMore && getMoreData()}
  overscan={2} // 视口上下预渲染2个视频，避免滑动时出现白屏
  itemContent={(index, item) => {
    return (
      // 每个视频项占满一屏高度
      <div style={{ height: '100vh' }}>
        <VideoPlayerShorts
          loop={true}
          sources={[
            {
              src: item.video_details.trim_video_link,
              type: "application/x-mpegURL",
            },
          ]}
        />
      </div>
    )
  }}
/>

3. 优化播放器资源释放逻辑 #

• 给视频组件增加视口检测：只有组件进入视口范围时才初始化播放器、发起流请求，滑出视口后立刻销毁播放器实例、断开流连接、释放视频解码占用的内存。
• 同一时间只播放用户当前停留的那1条视频，缓冲范围内的其他视频保持暂停、预加载封面状态，不要同时解码多个视频流。

• 提前加载视频首帧封面，滑动过程中先展示封面，等视频稳定停留在视口中间位置后再启动播放，减少滑动卡顿。
• 视频初始加载时优先拉取低码率流，等播放稳定后再切换高码率，降低瞬时内存峰值。

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