HarmonyOS 长列表优化

• 懒加载:提供列表数据按需加载能力，解决一次性加载长列表数据耗时长、占用过多资源的问题。
• 缓存列表项:通过预加载数据提升列表滑动体验。
• 组件复用:提供可复用组件对象的缓存资源池，降低相同组件短时间内频繁创建和销毁的开销。
• 布局优化:使用扁平化布局方案，减少视图嵌套层级和组件数，避免过度绘制，提升页面渲染效率。

• 数据量大的情况下使用懒加载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);
  }
}