- 懒加载:提供列表数据按需加载能力，解决一次性加载长列表数据耗时长、占用过多资源的问题。
- 缓存列表项:通过预加载数据提升列表滑动体验。
- 组件复用:提供可复用组件对象的缓存资源池，降低相同组件短时间内频繁创建和销毁的开销。
- 布局优化:使用扁平化布局方案，减少视图嵌套层级和组件数，避免过度绘制，提升页面渲染效率。
-
数据量大的情况下使用懒加载
LazyForEach
性能差异 缓存列表项
cachedCount,一般n/2为最佳，也要根据实际业务调整如：网络数据加载慢大于n/2；数据占用内存大，适当减少缓存小于n/2.
@Component
Struct MyComponent {
build () {
list() {
//…
LazyForEach(…)
}.cachedCount(n/2)//n为一屏幕显示的item数量
}
}
- 组件复用通过
@Reusable和aboutToReuse以及reuseId实现
//代码片段一
@Component
@Reusable
Export struct ArticleCardView {
@Prop isCollected: boolean = false;
@Prop isLiked: boolean = false;
@Prop articleItem: LearningResource = new LearningResource();
onCollected?: () => void;
onLiked?: () => void;
aboutToReuse(params) {
this.onCollected = params.onCollected;
this.onLiked = params.onLiked;
}
build() {
......
}
}
//代码片段二
@Component
export struct DiscoverView {
private data: ArticleListData = new ArticleListData();
......
build() {
List() {
Column() {
LazyForEach(this.data, (item: LearningResource) => {
ListItem() {
Column() {
ArticleCardView({
articleItem: item
......
})
}
}
.reuseId(‘ArticleCardView')
}, (item: LearningResource) => item.id)
}
}.cachedCount(3);
}
}
