[三、渲染控制法]4. LazyForEach：数据懒加载

标签：index void number LazyForEach listener listeners 控制法 data 加载

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

接口描述

LazyForEach(
    dataSource: IDataSource,             // 需要进行数据迭代的数据源
    itemGenerator: (item: any, index: number) => void,  // 子组件生成函数
    keyGenerator?: (item: any, index: number) => string // 键值生成函数
): void

参数：

参数名	参数类型	必填	参数描述
dataSource	IDataSource	是	LazyForEach数据源，需要开发者实现相关接口。
itemGenerator	(item: any， index:number) => void	是	子组件生成函数，为数组中的每一个数据项创建一个子组件。 说明： item是当前数据项，index是数据项索引值。 itemGenerator的函数体必须使用大括号{...}。itemGenerator每次迭代只能并且必须生成一个子组件。itemGenerator中可以使用if语句，但是必须保证if语句每个分支都会创建一个相同类型的子组件。itemGenerator中不允许使用ForEach和LazyForEach语句。
keyGenerator	(item: any, index:number) => string	否	键值生成函数，用于给数据源中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时，其键值不得更改，当数组中的数据项被新项替换时，被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的，但是，为了使开发框架能够更好地识别数组更改，提高性能，建议提供。如将数组反向时，如果没有提供键值生成器，则LazyForEach中的所有节点都将重建。 说明： item是当前数据项，index是数据项索引值。 数据源中的每一个数据项生成的键值不能重复。

IDataSource类型说明

interface IDataSource {
    totalCount(): number; // 获得数据总数
    getData(index: number): Object; // 获取索引值对应的数据
    registerDataChangeListener(listener: DataChangeListener): void; // 注册数据改变的监听器
    unregisterDataChangeListener(listener: DataChangeListener): void; // 注销数据改变的监听器
}

接口声明	参数类型	说明
totalCount(): number	-	获得数据总数。
getData(index: number): any	number	获取索引值index对应的数据。 index：获取数据对应的索引值。
registerDataChangeListener(listener:DataChangeListener): void	DataChangeListener	注册数据改变的监听器。 listener：数据变化监听器
unregisterDataChangeListener(listener:DataChangeListener): void	DataChangeListener	注销数据改变的监听器。 listener：数据变化监听器

DataChangeListener类型说明

interface DataChangeListener {
    onDataReloaded(): void; // 重新加载数据完成后调用
    onDataAdded(index: number): void; // 添加数据完成后调用
    onDataMoved(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换完成后调用
    onDataDeleted(index: number): void; // 删除数据完成后调用
    onDataChanged(index: number): void; // 改变数据完成后调用
    onDataAdd(index: number): void; // 添加数据完成后调用
    onDataMove(from: number, to: number): void; // 数据移动起始位置与数据移动目标位置交换完成后调用
    onDataDelete(index: number): void; // 删除数据完成后调用
    onDataChange(index: number): void; // 改变数据完成后调用
}

接口声明	参数类型	说明
onDataReloaded(): void	-	通知组件重新加载所有数据。 键值没有变化的数据项会使用原先的子组件，键值发生变化的会重建子组件。
onDataAdd(index: number): void8+	number	通知组件index的位置有数据添加。 index：数据添加位置的索引值。
onDataMove(from: number, to: number): void8+	from: number, to: number	通知组件数据有移动。 from: 数据移动起始位置，to: 数据移动目标位置。 说明： 数据移动前后键值要保持不变，如果键值有变化，应使用删除数据和新增数据接口。
onDataDelete(index: number):void8+	number	通知组件删除index位置的数据并刷新LazyForEach的展示内容。 index：数据删除位置的索引值。 说明： 需要保证dataSource中的对应数据已经在调用onDataDelete前删除，否则页面渲染将出现未定义的行为。
onDataChange(index: number): void8+	number	通知组件index的位置有数据有变化。 index：数据变化位置的索引值。
onDataAdded(index: number):void(deprecated)	number	通知组件index的位置有数据添加。 从API 8开始，建议使用onDataAdd。 index：数据添加位置的索引值。
onDataMoved(from: number, to: number): void(deprecated)	from: number, to: number	通知组件数据有移动。 从API 8开始，建议使用onDataMove。 from: 数据移动起始位置，to: 数据移动目标位置。 将from和to位置的数据进行交换。 说明： 数据移动前后键值要保持不变，如果键值有变化，应使用删除数据和新增数据接口。
onDataDeleted(index: number):void(deprecated)	number	通知组件删除index位置的数据并刷新LazyForEach的展示内容。 从API 8开始，建议使用onDataDelete。 index：数据删除位置的索引值。
onDataChanged(index: number): void(deprecated)	number	通知组件index的位置有数据有变化。 从API 8开始，建议使用onDataChange。 index：数据变化监听器。

使用限制

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

键值生成规则

在LazyForEach循环渲染过程中，系统会为每个item生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

LazyForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: any, index: number) => { return viewId + '-' + index.toString(); }, viewId在编译器转换过程中生成，同一个LazyForEach组件内其viewId是一致的。

组件创建规则

在确定键值生成规则后，LazyForEach的第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件。组件的创建包括两种情况：LazyForEach首次渲染和LazyForEach非首次渲染。

首次渲染

• 生成不同键值

在LazyForEach首次渲染时，会根据上述键值生成规则为数据源的每个数组项生成唯一键值，并创建相应的组件。

// Basic implementation of IDataSource to handle data listener
class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

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

  // 该方法为框架侧调用，为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);
    }
  }

  // 通知LazyForEach组件需要重载所有子组件
  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  // 通知LazyForEach组件需要在index对应索引处添加子组件
  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  // 通知LazyForEach组件在index对应索引处数据有变化，需要重建该子组件
  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  // 通知LazyForEach组件需要在index对应索引处删除该子组件
  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  // 通知LazyForEach组件将from索引和to索引处的子组件进行交换
  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

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

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

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

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

在上述代码中，键值生成规则是keyGenerator函数的返回值item。在LazyForEach循环渲染时，其为数据源数组项依次生成键值Hello 0、Hello 1 ... Hello 20，并创建对应的ListItem子组件渲染到界面上。

运行效果如下图所示。

图1 LazyForEach正常首次渲染

非首次渲染

当LazyForEach数据源发生变化，需要再次渲染时，开发者应根据数据源的变化情况调用listener对应的接口，通知LazyForEach做相应的更新，各使用场景如下。

• 添加数据

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

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

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

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

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

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

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          // 点击追加子组件
          this.data.pushData(`Hello ${this.data.totalCount()}`);
        })
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

当我们点击LazyForEach的子组件时，首先调用数据源data的pushData方法，该方法会在数据源末尾添加数据并调用notifyDataAdd方法。在notifyDataAdd方法内会又调用listener.onDataAdd方法，该方法会通知LazyForEach在该处有数据添加，LazyForEach便会在该索引处新建子组件。

运行效果如下图所示。

图2 LazyForEach添加数据

• 删除数据

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

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

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

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

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

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

  public deleteData(index: number): void {
    this.dataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }
}

@Entry
@Component
struct MyComponent {
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string, index: number) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          // 点击删除子组件
          this.data.deleteData(this.data.dataArray.indexOf(item));
        })
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

当我们点击LazyForEach的子组件时，首先调用数据源data的deleteData方法，该方法会删除数据源对应索引处的数据并调用notifyDataDelete方法。在notifyDataDelete方法内会又调用listener.onDataDelete方法，该方法会通知LazyForEach在该处有数据删除，LazyForEach便会在该索引处删除对应子组件。

运行效果如下图所示。

图3 LazyForEach删除数据

• 交换数据

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: string[] = [];

  public totalCount(): number {
    return 0;
  }

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

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    })
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    })
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    })
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    })
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    })
  }
}

class MyDataSource extends BasicDataSource {
  dataArray: string[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

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

  public addData(index: number, data: string): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

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

  public deleteData(index: number): void {
    this.dataArray.splice(index, 1);
    this.notifyDataDelete(index);
  }

  public moveData(from: number, to: number): void {
    let temp: string = this.dataArray[from];
    this.dataArray[from] = this.dataArray[to];
    this.dataArray[to] = temp;
    this.notifyDataMove(from, to);
  }
}

@Entry
@Component
struct MyComponent {
  private moved: number[] = [];
  private data: MyDataSource = new MyDataSource();

  aboutToAppear() {
    for (let i = 0; i <= 20; i++) {
      this.data.pushData(`Hello ${i}`)
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: string, index: number) => {
        ListItem() {
          Row() {
            Text(item).fontSize(50)
              .onAppear(() => {
                console.info("appear:" + item)
              })
          }.margin({ left: 10, right: 10 })
        }
        .onClick(() => {
          this.moved.push(this.data.dataArray.indexOf(item));
          if (this.moved.length === 2) {
            // 点击移动子组件
            this.data.moveData(this.moved[0], this.moved[1]);
            this.moved = [];
          }
        })
      }, (item: string) => item)
    }.cachedCount(5)
  }
}

当我们首次点击LazyForEach的子组件时，在moved成员变量内存入要移动的数据索引，再次点击LazyForEach另一个子组件时，我们将首次点击的子组件移到此处。调用数据源data的moveData方法，该方法会将数据源对应数据移动到预期的位置并调用notifyDatMove方法。在notifyDataMove方法内会又调用listener.onDataMove方法，该方法通知LazyForEach在该处有数据需要移动，LazyForEach便会将from和to索引处的子组件进行位置调换。

运行效果如下图所示。

图4 LazyForEach交换数据

• 改变单个数据    
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: string[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): string {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: string[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): string {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: string): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: string): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  80. public deleteData(index: number): void {
  81. this.dataArray.splice(index, 1);
  82. this.notifyDataDelete(index);
  83. }
  85. public changeData(index: number, data: string): void {
  86. this.dataArray.splice(index, 1, data);
  87. this.notifyDataChange(index);
  88. }
  89. }
  91. @Entry
  92. @Component
  93. struct MyComponent {
  94. private moved: number[] = [];
  95. private data: MyDataSource = new MyDataSource();
  97. aboutToAppear() {
  98. for (let i = 0; i <= 20; i++) {
  99. this.data.pushData(`Hello ${i}`)
  100. }
  101. }
  104. build() {
  105. List({ space: 3 }) {
  106. LazyForEach(this.data, (item: string, index: number) => {
  107. ListItem() {
  108. Row() {
  109. Text(item).fontSize(50)
  110. .onAppear(() => {
  111. console.info("appear:" + item)
  112. })
  113. }.margin({ left: 10, right: 10 })
  114. }
  115. .onClick(() => {
  116. this.data.changeData(index, item + '00');
  117. })
  118. }, (item: string) => item)
  119. }.cachedCount(5)
  120. }
  121. }

当我们点击LazyForEach的子组件时，首先改变当前数据，然后调用数据源data的changeData方法，在该方法内会调用notifyDataChange方法。在notifyDataChange方法内会又调用listener.onDataChange方法，该方法通知LazyForEach组件该处有数据发生变化，LazyForEach便会在对应索引处重建子组件。

运行效果如下图所示。

图5 LazyForEach改变单个数据

• 改变多个数据    
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: string[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): string {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: string[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): string {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: string): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: string): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  80. public deleteData(index: number): void {
  81. this.dataArray.splice(index, 1);
  82. this.notifyDataDelete(index);
  83. }
  85. public changeData(index: number): void {
  86. this.notifyDataChange(index);
  87. }
  89. public reloadData(): void {
  90. this.notifyDataReload();
  91. }
  93. public modifyAllData(): void {
  94. this.dataArray = this.dataArray.map((item: string) => {
  95. return item + '0';
  96. })
  97. }
  98. }
  100. @Entry
  101. @Component
  102. struct MyComponent {
  103. private moved: number[] = [];
  104. private data: MyDataSource = new MyDataSource();
  106. aboutToAppear() {
  107. for (let i = 0; i <= 20; i++) {
  108. this.data.pushData(`Hello ${i}`)
  109. }
  110. }
  112. build() {
  113. List({ space: 3 }) {
  114. LazyForEach(this.data, (item: string, index: number) => {
  115. ListItem() {
  116. Row() {
  117. Text(item).fontSize(50)
  118. .onAppear(() => {
  119. console.info("appear:" + item)
  120. })
  121. }.margin({ left: 10, right: 10 })
  122. }
  123. .onClick(() => {
  124. this.data.modifyAllData();
  125. this.data.reloadData();
  126. })
  127. }, (item: string) => item)
  128. }.cachedCount(5)
  129. }
  130. }

当我们点击LazyForEach的子组件时，首先调用data的modifyAllData方法改变了数据源中的所有数据，然后调用数据源的reloadData方法，在该方法内会调用notifyDataReload方法。在notifyDataReload方法内会又调用listener.onDataReloaded方法，通知LazyForEach需要重建所有子节点。LazyForEach会将原所有数据项和新所有数据项一一做键值比对，若有相同键值则使用缓存，若键值不同则重新构建。

运行效果如下图所示。

图6 LazyForEach改变多个数据

• 改变数据子属性

若仅靠LazyForEach的刷新机制，当item变化时若想更新子组件，需要将原来的子组件全部销毁再重新构建，在子组件结构较为复杂的情况下，靠改变键值去刷新渲染性能较低。因此框架提供了@Observed与@ObjectLink机制进行深度观测，可以做到仅刷新使用了该属性的组件，提高渲染性能。开发者可根据其自身业务特点选择使用哪种刷新方式。

   

1. class BasicDataSource implements IDataSource {
2. private listeners: DataChangeListener[] = [];
3. private originDataArray: StringData[] = [];
5. public totalCount(): number {
6. return 0;
7. }
9. public getData(index: number): StringData {
10. return this.originDataArray[index];
11. }
13. registerDataChangeListener(listener: DataChangeListener): void {
14. if (this.listeners.indexOf(listener) < 0) {
15. console.info('add listener');
16. this.listeners.push(listener);
17. }
18. }
20. unregisterDataChangeListener(listener: DataChangeListener): void {
21. const pos = this.listeners.indexOf(listener);
22. if (pos >= 0) {
23. console.info('remove listener');
24. this.listeners.splice(pos, 1);
25. }
26. }
28. notifyDataReload(): void {
29. this.listeners.forEach(listener => {
30. listener.onDataReloaded();
31. })
32. }
34. notifyDataAdd(index: number): void {
35. this.listeners.forEach(listener => {
36. listener.onDataAdd(index);
37. })
38. }
40. notifyDataChange(index: number): void {
41. this.listeners.forEach(listener => {
42. listener.onDataChange(index);
43. })
44. }
46. notifyDataDelete(index: number): void {
47. this.listeners.forEach(listener => {
48. listener.onDataDelete(index);
49. })
50. }
52. notifyDataMove(from: number, to: number): void {
53. this.listeners.forEach(listener => {
54. listener.onDataMove(from, to);
55. })
56. }
57. }
59. class MyDataSource extends BasicDataSource {
60. private dataArray: StringData[] = [];
62. public totalCount(): number {
63. return this.dataArray.length;
64. }
66. public getData(index: number): StringData {
67. return this.dataArray[index];
68. }
70. public addData(index: number, data: StringData): void {
71. this.dataArray.splice(index, 0, data);
72. this.notifyDataAdd(index);
73. }
75. public pushData(data: StringData): void {
76. this.dataArray.push(data);
77. this.notifyDataAdd(this.dataArray.length - 1);
78. }
79. }
81. @Observed
82. class StringData {
83. message: string;
84. constructor(message: string) {
85. this.message = message;
86. }
87. }
89. @Entry
90. @Component
91. struct MyComponent {
92. private moved: number[] = [];
93. @State data: MyDataSource = new MyDataSource();
95. aboutToAppear() {
96. for (let i = 0; i <= 20; i++) {
97. this.data.pushData(new StringData(`Hello ${i}`));
98. }
99. }
101. build() {
102. List({ space: 3 }) {
103. LazyForEach(this.data, (item: StringData, index: number) => {
104. ListItem() {
105. ChildComponent({data: item})
106. }
107. .onClick(() => {
108. item.message += '0';
109. })
110. }, (item: StringData, index: number) => index.toString())
111. }.cachedCount(5)
112. }
113. }
115. @Component
116. struct ChildComponent {
117. @ObjectLink data: StringData
118. build() {
119. Row() {
120. Text(this.data.message).fontSize(50)
121. .onAppear(() => {
122. console.info("appear:" + this.data.message)
123. })
124. }.margin({ left: 10, right: 10 })
125. }
126. }

此时点击LazyForEach子组件改变item.message时，重渲染依赖的是ChildComponent的@ObjectLink成员变量对其子属性的监听，此时框架只会刷新Text(this.data.message)，不会去重建整个ListItem子组件。

图7 LazyForEach改变数据子属性

常见使用问题

• 渲染结果非预期    
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: string[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): string {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: string[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): string {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: string): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: string): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  80. public deleteData(index: number): void {
  81. this.dataArray.splice(index, 1);
  82. this.notifyDataDelete(index);
  83. }
  84. }
  86. @Entry
  87. @Component
  88. struct MyComponent {
  89. private data: MyDataSource = new MyDataSource();
  91. aboutToAppear() {
  92. for (let i = 0; i <= 20; i++) {
  93. this.data.pushData(`Hello ${i}`)
  94. }
  95. }
  97. build() {
  98. List({ space: 3 }) {
  99. LazyForEach(this.data, (item: string, index: number) => {
  100. ListItem() {
  101. Row() {
  102. Text(item).fontSize(50)
  103. .onAppear(() => {
  104. console.info("appear:" + item)
  105. })
  106. }.margin({ left: 10, right: 10 })
  107. }
  108. .onClick(() => {
  109. // 点击删除子组件
  110. this.data.deleteData(index);
  111. })
  112. }, (item: string) => item)
  113. }.cachedCount(5)
  114. }
  115. }

  图8 LazyForEach删除数据非预期

  

  当我们多次点击子组件时，会发现删除的并不一定是我们点击的那个子组件。原因是当我们删除了某一个子组件后，位于该子组件对应的数据项之后的各数据项，其index均应减1，但实际上后续的数据项对应的子组件仍然使用的是最初分配的index，其itemGenerator中的index并没有发生变化，所以删除结果和预期不符。

  修复代码如下所示。

     
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: string[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): string {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: string[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): string {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: string): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: string): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  80. public deleteData(index: number): void {
  81. this.dataArray.splice(index, 1);
  82. this.notifyDataDelete(index);
  83. }
  85. public reloadData(): void {
  86. this.notifyDataReload();
  87. }
  88. }
  90. @Entry
  91. @Component
  92. struct MyComponent {
  93. private data: MyDataSource = new MyDataSource();
  95. aboutToAppear() {
  96. for (let i = 0; i <= 20; i++) {
  97. this.data.pushData(`Hello ${i}`)
  98. }
  99. }
  101. build() {
  102. List({ space: 3 }) {
  103. LazyForEach(this.data, (item: string, index: number) => {
  104. ListItem() {
  105. Row() {
  106. Text(item).fontSize(50)
  107. .onAppear(() => {
  108. console.info("appear:" + item)
  109. })
  110. }.margin({ left: 10, right: 10 })
  111. }
  112. .onClick(() => {
  113. // 点击删除子组件
  114. this.data.deleteData(index);
  115. // 重置所有子组件的index索引
  116. this.data.reloadData();
  117. })
  118. }, (item: string, index: number) => item + index.toString())
  119. }.cachedCount(5)
  120. }
  121. }

  在删除一个数据项后调用reloadData方法，重建后面的数据项，以达到更新index索引的目的。

  图9 修复LazyForEach删除数据非预期

  

• 重渲染时图片闪烁    
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: StringData[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): StringData {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: StringData[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): StringData {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: StringData): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: StringData): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  80. public reloadData(): void {
  81. this.notifyDataReload();
  82. }
  83. }
  85. class StringData {
  86. message: string;
  87. imgSrc: Resource;
  88. constructor(message: string, imgSrc: Resource) {
  89. this.message = message;
  90. this.imgSrc = imgSrc;
  91. }
  92. }
  94. @Entry
  95. @Component
  96. struct MyComponent {
  97. private moved: number[] = [];
  98. private data: MyDataSource = new MyDataSource();
  100. aboutToAppear() {
  101. for (let i = 0; i <= 20; i++) {
  102. this.data.pushData(new StringData(`Hello ${i}`, $r('app.media.img')));
  103. }
  104. }
  106. build() {
  107. List({ space: 3 }) {
  108. LazyForEach(this.data, (item: StringData, index: number) => {
  109. ListItem() {
  110. Column() {
  111. Text(item.message).fontSize(50)
  112. .onAppear(() => {
  113. console.info("appear:" + item.message)
  114. })
  115. Image(item.imgSrc)
  116. .width(500)
  117. .height(200)
  118. }.margin({ left: 10, right: 10 })
  119. }
  120. .onClick(() => {
  121. item.message += '00';
  122. this.data.reloadData();
  123. })
  124. }, (item: StringData, index: number) => JSON.stringify(item))
  125. }.cachedCount(5)
  126. }
  127. }

  图10 LazyForEach仅改变文字但是图片闪烁问题

  

  在我们点击ListItem子组件时，我们只改变了数据项的message属性，但是LazyForEach的刷新机制会导致整个ListItem被重建。由于Image组件是异步刷新，所以视觉上图片会发生闪烁。为了解决这种情况我们应该使用@ObjectLink和@Observed去单独刷新使用了item.message的Text组件。

  修复代码如下所示。

     
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: StringData[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): StringData {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: StringData[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): StringData {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: StringData): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: StringData): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  79. }
  81. @Observed
  82. class StringData {
  83. message: string;
  84. imgSrc: Resource;
  85. constructor(message: string, imgSrc: Resource) {
  86. this.message = message;
  87. this.imgSrc = imgSrc;
  88. }
  89. }
  91. @Entry
  92. @Component
  93. struct MyComponent {
  94. @State data: MyDataSource = new MyDataSource();
  96. aboutToAppear() {
  97. for (let i = 0; i <= 20; i++) {
  98. this.data.pushData(new StringData(`Hello ${i}`, $r('app.media.img')));
  99. }
  100. }
  102. build() {
  103. List({ space: 3 }) {
  104. LazyForEach(this.data, (item: StringData, index: number) => {
  105. ListItem() {
  106. ChildComponent({data: item})
  107. }
  108. .onClick(() => {
  109. item.message += '0';
  110. })
  111. }, (item: StringData, index: number) => index.toString())
  112. }.cachedCount(5)
  113. }
  114. }
  116. @Component
  117. struct ChildComponent {
  118. @ObjectLink data: StringData
  119. build() {
  120. Column() {
  121. Text(this.data.message).fontSize(50)
  122. .onAppear(() => {
  123. console.info("appear:" + this.data.message)
  124. })
  125. Image(this.data.imgSrc)
  126. .width(500)
  127. .height(200)
  128. }.margin({ left: 10, right: 10 })
  129. }
  130. }

  图11 修复LazyForEach仅改变文字但是图片闪烁问题

  

• @ObjectLink属性变化UI未更新    
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: StringData[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): StringData {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: StringData[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): StringData {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: StringData): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: StringData): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  79. }
  81. @Observed
  82. class StringData {
  83. message: NestedString;
  84. constructor(message: NestedString) {
  85. this.message = message;
  86. }
  87. }
  89. @Observed
  90. class NestedString {
  91. message: string;
  92. constructor(message: string) {
  93. this.message = message;
  94. }
  95. }
  97. @Entry
  98. @Component
  99. struct MyComponent {
  100. private moved: number[] = [];
  101. @State data: MyDataSource = new MyDataSource();
  103. aboutToAppear() {
  104. for (let i = 0; i <= 20; i++) {
  105. this.data.pushData(new StringData(new NestedString(`Hello ${i}`)));
  106. }
  107. }
  109. build() {
  110. List({ space: 3 }) {
  111. LazyForEach(this.data, (item: StringData, index: number) => {
  112. ListItem() {
  113. ChildComponent({data: item})
  114. }
  115. .onClick(() => {
  116. item.message.message += '0';
  117. })
  118. }, (item: StringData, index: number) => JSON.stringify(item) + index.toString())
  119. }.cachedCount(5)
  120. }
  121. }
  123. @Component
  124. struct ChildComponent {
  125. @ObjectLink data: StringData
  126. build() {
  127. Row() {
  128. Text(this.data.message.message).fontSize(50)
  129. .onAppear(() => {
  130. console.info("appear:" + this.data.message.message)
  131. })
  132. }.margin({ left: 10, right: 10 })
  133. }
  134. }

  图12 ObjectLink属性变化后UI未更新

  

  @ObjectLink装饰的成员变量仅能监听到其子属性的变化，再深入嵌套的属性便无法观测到了，因此我们只能改变它的子属性去通知对应组件重新渲染，具体请查看@ObjectLink与@Observed的详细使用方法和限制条件。

  修复代码如下所示。

     
  1. class BasicDataSource implements IDataSource {
  2. private listeners: DataChangeListener[] = [];
  3. private originDataArray: StringData[] = [];
  5. public totalCount(): number {
  6. return 0;
  7. }
  9. public getData(index: number): StringData {
  10. return this.originDataArray[index];
  11. }
  13. registerDataChangeListener(listener: DataChangeListener): void {
  14. if (this.listeners.indexOf(listener) < 0) {
  15. console.info('add listener');
  16. this.listeners.push(listener);
  17. }
  18. }
  20. unregisterDataChangeListener(listener: DataChangeListener): void {
  21. const pos = this.listeners.indexOf(listener);
  22. if (pos >= 0) {
  23. console.info('remove listener');
  24. this.listeners.splice(pos, 1);
  25. }
  26. }
  28. notifyDataReload(): void {
  29. this.listeners.forEach(listener => {
  30. listener.onDataReloaded();
  31. })
  32. }
  34. notifyDataAdd(index: number): void {
  35. this.listeners.forEach(listener => {
  36. listener.onDataAdd(index);
  37. })
  38. }
  40. notifyDataChange(index: number): void {
  41. this.listeners.forEach(listener => {
  42. listener.onDataChange(index);
  43. })
  44. }
  46. notifyDataDelete(index: number): void {
  47. this.listeners.forEach(listener => {
  48. listener.onDataDelete(index);
  49. })
  50. }
  52. notifyDataMove(from: number, to: number): void {
  53. this.listeners.forEach(listener => {
  54. listener.onDataMove(from, to);
  55. })
  56. }
  57. }
  59. class MyDataSource extends BasicDataSource {
  60. private dataArray: StringData[] = [];
  62. public totalCount(): number {
  63. return this.dataArray.length;
  64. }
  66. public getData(index: number): StringData {
  67. return this.dataArray[index];
  68. }
  70. public addData(index: number, data: StringData): void {
  71. this.dataArray.splice(index, 0, data);
  72. this.notifyDataAdd(index);
  73. }
  75. public pushData(data: StringData): void {
  76. this.dataArray.push(data);
  77. this.notifyDataAdd(this.dataArray.length - 1);
  78. }
  79. }
  81. @Observed
  82. class StringData {
  83. message: NestedString;
  84. constructor(message: NestedString) {
  85. this.message = message;
  86. }
  87. }
  89. @Observed
  90. class NestedString {
  91. message: string;
  92. constructor(message: string) {
  93. this.message = message;
  94. }
  95. }
  97. @Entry
  98. @Component
  99. struct MyComponent {
  100. private moved: number[] = [];
  101. @State data: MyDataSource = new MyDataSource();
  103. aboutToAppear() {
  104. for (let i = 0; i <= 20; i++) {
  105. this.data.pushData(new StringData(new NestedString(`Hello ${i}`)));
  106. }
  107. }
  109. build() {
  110. List({ space: 3 }) {
  111. LazyForEach(this.data, (item: StringData, index: number) => {
  112. ListItem() {
  113. ChildComponent({data: item})
  114. }
  115. .onClick(() => {
  116. item.message = new NestedString(item.message.message + '0');
  117. })
  118. }, (item: StringData, index: number) => JSON.stringify(item) + index.toString())
  119. }.cachedCount(5)
  120. }
  121. }
  123. @Component
  124. struct ChildComponent {
  125. @ObjectLink data: StringData
  126. build() {
  127. Row() {
  128. Text(this.data.message.message).fontSize(50)
  129. .onAppear(() => {
  130. console.info("appear:" + this.data.message.message)
  131. })
  132. }.margin({ left: 10, right: 10 })
  133. }
  134. }

  图13 修复ObjectLink属性变化后UI更新

  

标签：index,void,number,LazyForEach,listener,listeners,控制法,data,加载
From： https://www.cnblogs.com/strengthen/p/18325958