ArkTs之:数据懒加载——LazyForEach的用法

官方描述

LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。

使用限制

• LazyForEach必须在容器组件内使用，仅有List、Grid、Swiper以及WaterFlow组件支持数据懒加载（可配置cachedCount属性，即只加载可视部分以及其前后少量数据用于缓冲），其他组件仍然是一次性加载所有的数据。
• LazyForEach在每次迭代中，必须创建且只允许创建一个子组件。
• 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
• 允许LazyForEach包含在if/else条件渲染语句中，也允许LazyForEach中出现if/else条件渲染语句。
• 键值生成器必须针对每个数据生成唯一的值，如果键值相同，将导致键值相同的UI组件渲染出现问题。
• LazyForEach必须使用DataChangeListener对象进行更新，对第一个参数dataSource重新赋值会异常；dataSource使用状态变量时，状态变量改变不会触发LazyForEach的UI刷新。
• 为了高性能渲染，通过DataChangeListener对象的onDataChange方法来更新UI时，需要生成不同于原来的键值来触发组件刷新。
• LazyForEach必须和@Reusable装饰器一起使用才能触发节点复用。使用方法：将@Reusable装饰在LazyForEach列表的组件上，见使用规则。

实战

LazyForEach是专门用来进行数据懒加载的接口,非常适合大数据量渲染的场景,但是想使用它必须要先实现IDatasource接口才能使用,废话不多说,直接上代码:

//第一步:实现IDataSource接口
// RecommendDataSource.ets
import { Recommend_Item } from '../DataType/index';
export class RecommendDataSource implements IDataSource {
  // 数据源
  private recommends: Array<Recommend_Item>;
  // 监听器
  private listeners: DataChangeListener[] = [];

  constructor(data: Recommend_Item[]) {
    this.recommends = data;
  }
  // 返回数据源中的数据数量
  public totalCount(): number {
    return this.recommends.length;
  }
  // 根据索引返回数据项
  public getData(index: number): Recommend_Item {
    return this.recommends[index];
  }
  // 为 LazyForEach 组件注册监听器
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }
  // 为 LazyForEach 组件注销监听器
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }
}

//第二步:在组件中引用并实例化
//Recommend.ets
import { Recommend_Item } from '../DataType/index';
import { RecommendDataSource } from '../MockData/RecommendDataSource';

@Component
export struct Recommend {
  @Prop RecommendList: Array<Recommend_Item> = [];  // 默认初始化为空数组
  private dataSource: RecommendDataSource = new RecommendDataSource([]);//初始化

  aboutToAppear() {
    // 在生命周期钩子中重新初始化 dataSource（如果 RecommendList 有更新）
    this.dataSource = new RecommendDataSource(this.RecommendList);
    console.log('RecommendList updated:', JSON.stringify(this.RecommendList), JSON.stringify(this.dataSource))
  } 
  build() {
    List({ space: 3 }) {
      LazyForEach(this.dataSource, (item: Recommend_Item, index: number) => {
        ListItem() {
          Row() {
            Text(item.type + '')
              .fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item.type);
              });
          }.margin({ left: 10, right: 10 });
        }
        .onClick(() => {
          // 处理点击事件
        });
      }, (item: Recommend_Item) => item.type + '');
    }.cachedCount(5);
  }
}

最终效果

懒加载效果成功实现