SuperAPI AI 工具集

virtualization

通用与其它

查看项目

更新于 10-16 03:38

技能介绍

用途:解决 MUI 在渲染 1000+ DOM 节点时的布局抖动、内存压力和首屏挂载延迟,做法是只渲染可见项加少量 overscan 缓冲,由虚拟化库负责位置计算,使用方提供行渲染器。经验规则是超过 100 项的列表或数量不确定的 API 列表都应虚拟化。

主要能力:react-window 的 FixedSizeList 适合等高行(itemSize 需与实际行高一致);VariableSizeList 适合多行文本等不同高度行,数据变化后需调用 listRef.current.resetAfterIndex(0, true) 重算缓存尺寸。react-virtuoso 自动处理可变高度,支持分组、页眉页脚和滚动到指定索引,分组可用 GroupedVirtuoso 配合 ListSubheader。虚拟化 Autocomplete 的核心是覆盖 ListboxComponent,也可用 @mui/base 的 useAutocomplete 无头方式自行控制。DataGrid 默认虚拟化行列,可用 rowBufferPx、columnBufferPx 调节缓冲区;DataGridPro 支持 rowsLoadingMode="server" 与 onFetchRows 的服务端虚拟化。无限滚动可用 Virtuoso 配合 API 分页。

必要用法:react-window 安装 npm install react-window @types/react-window;react-virtuoso 安装 npm install react-virtuoso。MUI ListItem 在虚拟列表中需设置 style,并使用 component="div" 避免嵌套 li 问题。

适用场景:大用户列表、消息流、文件列表、海量选项下拉、超大数据表格与滚动加载列表。

限制:itemSize 必须匹配实际行高,否则滚动定位会偏差;可变高度需要在数据变化时重置尺寸;服务端行加载需要后端分页接口配合;其他具体平台、收费与效果资料未提供。