LazyForEach ArkTS中的性能加速器原创

因为活着就一定行

发布于 2024-12-3 23:28

浏览

1收藏

伙计们伙计们，在鸿蒙应用开发的世界里，性能和流畅度是用户体验的关键。而LazyForEach则是我们在面对长列表或大数据集时的一把好用的工具。这家伙不是简单的循环语句，而是一种智能的数据迭代方式，它能够按需加载数据，只在必要时创建组件，从而大幅度提升应用的性能和响应速度。

LazyForEach的工作原理

LazyForEach这家伙的聪明之处在于，它只在数据进入可视区域时才创建对应的UI组件，一旦数据滑出屏幕，对应的组件就会被销毁，这样就能大大减少内存的占用。这就像是在告诉应用：“嘿，兄弟，别一次性把所有家伙都拿出来，只把需要的拿出来就行了。”

使用LazyForEach的限制和注意事项

虽然LazyForEach很酷，但也不是没有规矩的。以下是一些使用时的注意事项：

容器组件限制：LazyForEach必须在支持懒加载的容器组件内使用，比如List、Grid、Swiper和WaterFlow。其他的组件，比如普通的Column或Row，就不支持这种懒加载方式。
单次使用：在同一个容器组件内，只能使用一个LazyForEach。别想着同时用多个LazyForEach或者和其他循环语句混用，这样会导致不可预知的问题。
子组件限制：每次迭代中，LazyForEach只能创建一个子组件。这意味着你不能在一个迭代中创建多个根组件。
键值生成器：为了确保每个组件都能被正确地识别和复用，LazyForEach需要一个键值生成器来为每个数据项生成唯一的键值。如果两个数据项的键值相同，就会导致渲染问题。
数据更新：LazyForEach必须使用DataChangeListener对象进行更新。直接重新赋值给数据源是不会触发UI刷新的。

代码实现和重构

下面我们通过一些代码示例来深入了解LazyForEach的用法。

示例1：基础使用

// 定义数据源接口
interface IDataSource {
  totalCount(): number;
  getData(index: number): string;
  registerDataChangeListener(listener: DataChangeListener): void;
  unregisterDataChangeListener(listener: DataChangeListener): void;
  notifyDataReload(): void;
  notifyDataAdd(index: number): void;
  notifyDataChange(index: number): void;
  notifyDataDelete(index: number): void;
}

// 实现数据源
class MyDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private dataArray: string[] = [];

  // 实现接口方法
  totalCount(): number {
    return this.dataArray.length;
  }

  getData(index: number): string {
    return this.dataArray[index];
  }

  // 省略其他方法的实现...
}

// 组件实现
@Entry@Componentstruct MyListComponent {
  private dataSource: MyDataSource = new MyDataSource();

  build() {
    List({ space: 3 }) {
      LazyForEach(this.dataSource, (item: string) => {
        ListItem() {
          Text(item).fontSize(50);
        }
      }, (item: string) => item); // 使用item本身作为键值
    }
    .cachedCount(5); // 缓存5个项目
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.

示例2：动态数据操作

// 扩展MyDataSource类，添加数据操作方法
class MyDataSource extends BasicDataSource {
  // 省略其他方法...

  public addData(data: string): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

// 组件实现
@Entry@Componentstruct MyListComponent {
  private dataSource: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i < 10; i++) {
      this.dataSource.addData(`Item ${i}`);
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.dataSource, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onClick(() => {
                // 动态添加数据
                this.dataSource.addData(`New Item ${this.dataSource.totalCount()}`);
              });
          }
        };
      }, (item: string) => item);
    }
    .cachedCount(5);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.

示例3：解决删除数据时的索引问题

// 组件实现
@Entry@Componentstruct MyListComponent {
  private dataSource: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i < 10; i++) {
      this.dataSource.addData(`Item ${i}`);
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.dataSource, (item: string, index: number) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onClick(() => {
                // 删除当前项，并重新加载数据
                this.dataSource.dataArray.splice(index, 1);
                this.dataSource.notifyDataDelete(index);
                this.dataSource.notifyDataReload();
              });
          }
        };
      }, (item: string, index: number) => `${item}_${index}`); // 使用item和index组合作为键值
    }
    .cachedCount(5);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.