在鸿蒙(HarmonyOS)应用开发中,LazyForEach
是专为 长列表性能优化 设计的组件,其核心思想是 “按需加载”。简而言之:
一句话定义
LazyForEach
是鸿蒙用于高效渲染大规模数据的列表组件,只渲染当前可视区域的项,滚动时动态加载/复用组件,从而大幅降低内存消耗。
核心优势
-
性能提升
- 内存降低 70%(对比普通
ForEach
) - 支持 10万+ 数据的流畅滚动
- 内存降低 70%(对比普通
-
按需加载
- 仅渲染 屏幕可见项 + 少量缓存项
-
组件复用
- 自动复用不可见区域的组件(类似 Android 的 RecyclerView)
基本用法示例
// 1. 定义唯一键生成函数
const keyGenerator = (item: Item) => item.id;
// 2. 使用LazyForEach
List() {
LazyForEach(
dataSource, // 实现IDataSource接口的数据源
(item: Item) => { // 渲染单一项
ListItem() {
Text(item.name)
}
},
keyGenerator // 必须提供唯一键
)
}
.cachedCount(5) // 预缓存可视区外5项
与普通 ForEach 的对比
场景 | 适用组件 | 数据量 | 内存消耗 | 滚动流畅度 |
---|---|---|---|---|
短列表(<50项) | ForEach | 小 | 正常 | 高 |
长列表(≥100项) | LazyForEach | 大(万级) | 低 | 极高 |
关键注意点
- 必须提供唯一键:用于组件复用时的身份标识(如
item.id
) - 数据源需实现
IDataSource
接口:提供数据长度、获取单条数据等方法 - 合理设置
cachedCount
:建议缓存数为屏幕可见项数的 1~2 倍
一句话总结:当你的列表需要展示 大量数据 或对 性能敏感 时,用 LazyForEach
就对了!