【鸿蒙面试题-6】LazyForEach 懒加载

1. 什么是LazyForEach？

LazyForEach是一个数据懒加载组件，主要用于在滚动容器中根据可视区域按需创建和销毁组件，以降低内存占用。它通过延迟加载数据，只在需要时才加载和渲染数据，从而优化性能，提升用户体验。

2. 为什么需要LazyForEach？

减少内存占用：通过按需加载和销毁组件，减少内存占用，避免一次性加载大量数据导致的性能问题。

提升性能：在长列表或瀑布流等场景中，LazyForEach可以显著减少页面首次加载时间和滑动时的卡顿。

.优化用户体验：通过减少加载时间，提升用户在使用应用时的流畅性和响应速度。

3. 如何使用LazyForEach？

1.在容器组件内使用：LazyForEach必须在容器组件（如List、Grid、Swiper、WaterFlow）内使用。

2.创建数据源：实现一个数据源类，继承自BasicDataSource或IDataSource接口，提供数据总量、获取数据、添加数据等方法。

3.使用LazyForEach：在组件中使用LazyForEach，传入数据源、子组件生成函数和键值生成函数。

4.处理数据变化：通过DataChangeListener对象处理数据变化，调用onDataAdd、onDataChange等方法通知LazyForEach更新。

TypeScript 复制代码

 // commons/basic/src/main/ets/utils/LazyForEachHelper.ets
export class LazyForEachDataSource<T> implements IDataSource {
  private listeners: DataChangeListener[] = [];
  // 数据源
  private dataArray: T[] = [];

  // 返回数据的长度
  public totalCount(): number {
    return this.dataArray.length;
  }

  // 返回数组指定指定索引的数据
  public getData(index: number) {
    return this.dataArray[index];
  }

  // 给数组增加一条数据
  public pushData(data: T): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }

  // 批量设置数组
  public setArray(arr: T[]) {
    this.dataArray = arr
    //   通知UI更新
    this.notifyDataReload()
  }

  // 删除数组中的某一条数据

  // 修改数组中某个数据 属性

  // 数组中元素 调换位置

  // 该方法为框架侧调用，为LazyForEach组件向其数据源处添加listener监听
  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  // 该方法为框架侧调用，为对应的LazyForEach组件在数据源处去除listener监听
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  // 数据改变，  通知UI更新 所有数据
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 添加数据了 顺便帮你更新
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.ADD, index: index}]);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.CHANGE, index: index}]);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
      // 写法2：listener.onDatasetChange([{type: DataOperationType.DELETE, index: index}]);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
      // 写法2：listener.onDatasetChange(
      //         [{type: DataOperationType.EXCHANGE, index: {start: from, end: to}}]);
    })
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    })
  }
}

TypeScript 复制代码

import { LazyForEachDataSource } from "./LazyForEach"

interface person {
  id: number,
  name: string,
  age: number
}

@Entry
@Component
export struct Demo {
  dataArray: person[] = [
    { id: 1, name: '张三', age: 18 },
    { id: 2, name: '李四', age: 19 },
    { id: 3, name: '王五', age: 20 },
    { id: 4, name: '赵六', age: 21 },
    { id: 5, name: '孙七', age: 22 },
    { id: 6, name: '周八', age: 23 },
    { id: 7, name: '吴九', age: 24 },
    { id: 8, name: '郑十', age: 25 },
    { id: 9, name: '钱十一', age: 26 },
    { id: 10, name: '王十二', age: 27 },
    { id: 11, name: '冯十三', age: 28 },
    { id: 12, name: '陈十四', age: 29 },
    { id: 13, name: '褚十五', age: 30 },
    { id: 14, name: '卫十六', age: 31 },
    { id: 15, name: '蒋十七', age: 32 },
    { id: 16, name: '沈十八', age: 33 },
    { id: 17, name: '韩十九', age: 34 },
    { id: 18, name: '杨二十', age: 35 },
    { id: 19, name: '朱二十一', age: 36 },
    { id: 20, name: '秦二十二', age: 37 }
  ];
  lazyData: LazyForEachDataSource<person> = new LazyForEachDataSource()
  aboutToAppear(): void {
    this.lazyData.setArray(this.dataArray);
  }

  build() {
    Column() {
      List({space:10}) {
        LazyForEach(this.lazyData, (item: person, index: number) => {
          ListItem() {
            Text(`我叫${item.name}我今年${item.age}岁`).width('100%').height(50).backgroundColor(Color.White).textAlign(TextAlign.Center)
          }
        }, (item: person) => item.id.toString()) // 使用id作为key
      }
    }.width("100%").height("100%").backgroundColor(Color.Pink)
  }
}

总结

LazyForEach 接收数据源不再是普通的数组，而是一个继承了IDataSource接口的实例

真正数据/数组存放在实例的成员上

除此之外还重要，还有很重要的成员 - 数据变化监听器 DataChangeListener

要操作数据的时候直接操作真正的数据源 -> 主动调用数据变化监听器的一些方法（add/delete/move）

注意第三个参数要传入唯一标识的 id ,内部使用 diff 算法时才可以实现增量更新而不是全量更新