在React与React Native中使用虚拟化列表的适用场景是什么？

通用场景判定标准 #

没有绝对强制的启用阈值，行业通用的参考判定规则如下：

• 静态简单列表项（纯文本、无嵌套结构、无交互）超过100条，或带复杂交互/嵌套结构的列表项超过30条时，建议启用虚拟化列表
• 若列表项包含动画、多图加载、实时状态计算逻辑，不管数量多少，只要滚动时出现明显掉帧、页面响应延迟，即可直接启用虚拟化，不需要卡数量阈值
• 额外参考维度：如果列表预估总渲染高度超过3个当前视口高度，建议考虑虚拟化，避免节点堆积导致内存占用过高

React与React Native生态适配提示 #

• React Web 生态常用的react-window、react-virtualized需要自行配置列表项高度规则，动态高度场景需要额外做适配
• React Native 内置的VirtualizedList以及基于它封装的FlatList默认支持动态高度计算，适配成本更低，常规场景优先用官方封装的组件即可

移动端特殊适用规则 #

受中端移动设备的性能限制，判定阈值要比桌面端低50%左右：

• 静态简单列表项超过50条、复杂列表项超过15条就建议启用虚拟化
• 面向全量用户的移动端产品，要额外考虑内存限制：普通中端安卓设备单APP可用内存仅2-4G，非虚拟化长列表很容易触发内存回收导致卡顿甚至闪退，长度超过20条的列表可以优先做虚拟化适配
• 如果使用RN的FlatList出现滚动卡顿，可以优先开启removeClippedSubviews属性优化，不需要直接替换自定义虚拟化实现

不适用场景提示 #

虚拟化列表仅渲染视口内元素的特性，会导致页内查找、全选复制、锚点定位等功能失效，这类场景优先用分页懒加载而非虚拟化。

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