实现带元素回收、仅渲染可见内容的React CSS Grid无限滚动网格

核心需求对齐 #

• 网格总承载约120个方形tile，单次视口仅稳定展示8个tile，预留缓冲区后总渲染DOM数量控制在16个左右，大幅降低大数量场景的渲染开销
• 滚动过程触发元素回收复用：当顶部约4个tile滚出视口缓冲区范围时，直接回收对应DOM元素，替换为后续待展示的tile数据放入底部缓冲区，等待滚动时直接复用展示，整体逻辑对标React Native FlatList、RecyclerListView的dequeuing回收机制
• 基础约束适配：单个tile在视口宽度变化时，始终保持原始方形宽高比
• 规避现有开源方案缺陷：不使用无法适配CSS Grid布局的类React版FlatList组件，不依赖年久失修、存在安全漏洞、无法正常编译的老旧react-infinite-grid库

可落地实现逻辑 #

基础分层结构设计 #

• 最外层设置静态占位层：按总tile数量、单个tile的动态高度计算整体占位高度，撑满滚动容器的滚动条长度，避免滚动过程中滚动条长度异常跳动
• 占位层上方设置绝对定位的动态渲染层：专门放置当前需要展示的可见tile+缓冲区tile，不参与整体滚动高度计算

动态尺寸计算 #

• 监听容器宽度变化，按CSS Grid的列配置规则自动计算单个tile的尺寸：因需保持tile原始宽高比，tile高度 = （容器有效内容宽度 - 列间距*（总列数-1））/ 总列数，完全匹配方形tile的原始比例要求
• 基于固定行高值，实时推算当前滚动位置对应的首行可见索引，为回收逻辑提供计算依据

核心回收复用（dequeuing）逻辑 #

• 维护固定大小的DOM元素池：池的总长度按「可见元素数 + 上下缓冲区预留数」设置，本场景下固定为16个即可覆盖性能与体验要求
• 监听容器滚动事件，实时计算当前滚动边界：
  • 向上滚动时，若顶部tile完全滚出上方缓冲区范围，直接将对应DOM元素从渲染队列摘出，绑定下方新增的待展示tile数据，重新定位到渲染队列的底部位置
  • 向下滚动时，若底部tile完全滚出下方缓冲区范围，直接将对应DOM元素从渲染队列摘出，绑定上方新增的待展示tile数据，重新定位到渲染队列的顶部位置
• 整个流程中DOM元素总数始终稳定为16个，不随总tile数量增长额外创建新DOM节点

CSS Grid适配规则 #

• 动态渲染层直接使用原生CSS Grid布局，按计算出的列数、列间距、行间距配置grid-template，无需修改原生布局逻辑
• 每个被复用的tile元素，通过设置grid-row-start、grid-column-start属性直接定位到对应网格位置，无需调整元素本身的基础布局样式

实现注意事项 #

• 回收逻辑中不直接销毁、重新创建DOM节点，仅通过修改元素绑定的数据、CSS定位属性完成复用，避免反复触发DOM重排
• 缓冲区预留长度严格按需求设置：顶部、底部各预留4个tile的缓冲区，刚好平衡滚动流畅度与内存占用，避免快速滚动时出现内容白屏
• 视口宽度变化时，重新计算tile高度、网格列数、占位层整体高度，同步更新渲染池内所有元素的定位参数，无需重建整个元素池

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