#2023盲盒+码# OpenHarmony应用懒加载缓存列表项学习原创

zhushangyuan_

发布于 2023-8-30 21:15

浏览

0收藏

【本文正在参加 2023「盲盒」+码有奖征文活动】 https://ost.51cto.com/posts/25284

本文，先记录学习下懒加载LazyForEach的缓存列表项设置。因水平有限，如有失误，请随时指教。

缓存列表项

ForEach循环渲染会一次性加载全量数据，不需要设置缓存列表项。对于LazyForEach懒加载，默认缓存列表项数量为0，可以通过指定缓存数量cachedCount来设置最小缓存列表项数量。通过把屏幕外列表项需要的数据预先加载缓存起来，减少渲染的开销，可以提升列表响应速度。

指定缓存数量cachedCount时，除屏幕内显示的组件，额外获取缓存列表项数量的组件数据；上滑下滑时，要出现在屏幕上的组件才会创建渲染；列表变化时，出现在屏幕上的才会创建渲染。可视区域外缓存的列表项数量少于该值时，会触发获取列表项数据事件。比如，如果缓存列表项数量为10，下滑到第10项展示在屏幕上时，会请求把第20项之前的列表数据加载缓存起来。当上滑下滑间隔进行时，列表数据两个方向的数据都会缓存起来。只有屏幕上显示的组件才会挂载List父组件节点。缓存列表项只会提前获取数据源数据，要滑到屏幕可视区域内时，才创建渲染组件。

#2023盲盒+码# OpenHarmony应用懒加载缓存列表项学习-鸿蒙开发者社区

在OpenHarmony SDK文件list.d.ts中，ListAttribute列表属性类中定义了一个cachedCount属性。

该属性cachedCount用于设置长列表延迟懒加载时列表项ListItem的最少缓存数量，表示屏幕外List/Grid预加载项的个数。

应用通过增大List控件的cachedCount参数，调整UI界面的加载范围。如果需要请求网络图片，可以在列表项滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。

在Sample聊天实例应用中，并未使能该属性，可以尝试使能该属性。缓存列表项数量，建议设置为当前列表页面屏幕可以展示列表项的2倍，具体设置根据列表页面实际情况进行酌情设置。

如下是使用cachedCount参数的例子，可以指定缓存列表项的数量。当设置cachedCount时，可以通过在数据源实现类getData()方法中，添加日志打印来验证。当列表界面滑动时，除了获取屏幕上展示的数据，还会额外获取Constants.CACHED_COUNT条列表项数据缓存起来。

 build() {
    Column() {
      List() {
        ......
        LazyForEach(this.chatListData, (msg: ChatModel) => {
          ListItem() {
            ChatView({ chatItem: msg})
          }
        }, (msg: ChatModel) => msg.user.userId)
      }
      .backgroundColor(Color.White)
      .listDirection(Axis.Vertical)
        ......
      .cachedCount(this.list_cachedCount ? Constants.CACHED_COUNT : 0) // 缓存列表数量
    }
  }

不同的应用程序设置的最佳缓存数量不一致，需要针对应用程序测试得出最佳缓存数量。例如列表项中需要显示网络数据，而网络数据加载较慢，为了提升列表信息的浏览效率和浏览体验，我们可以适当的多设置一些缓存数量；如果列表中需要加载一些大图或者视频等，这些数据占用的内存较大，为了减少内存占用，我们需要适当减少缓存数量的设置；因此，在实际场景中，我们需要不断尝试验证，设置适当的缓存数量，来达到体验和内存的平衡。