- 懶加載:提供列表數(shù)據(jù)按需加載能力慕淡，解決一次性加載長列表數(shù)據(jù)耗時長名扛、占用過多資源的問題。
- 緩存列表項:通過預(yù)加載數(shù)據(jù)提升列表滑動體驗辩恼。
- 組件復(fù)用:提供可復(fù)用組件對象的緩存資源池惕橙，降低相同組件短時間內(nèi)頻繁創(chuàng)建和銷毀的開銷瞧甩。
- 布局優(yōu)化:使用扁平化布局方案，減少視圖嵌套層級和組件數(shù)弥鹦，避免過度繪制肚逸，提升頁面渲染效率。
-
數(shù)據(jù)量大的情況下使用懶加載
LazyForEach
性能差異 緩存列表項
cachedCount,一般n/2為最佳彬坏，也要根據(jù)實際業(yè)務(wù)調(diào)整如：網(wǎng)絡(luò)數(shù)據(jù)加載慢大于n/2朦促；數(shù)據(jù)占用內(nèi)存大，適當(dāng)減少緩存小于n/2.
@Component
Struct MyComponent {
build () {
list() {
//…
LazyForEach(…)
}.cachedCount(n/2)//n為一屏幕顯示的item數(shù)量
}
}
- 組件復(fù)用通過
@Reusable和aboutToReuse以及reuseId實現(xiàn)
//代碼片段一
@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);
}
}
