鸿蒙OpenHarmony【LazyForEach：数据懒加载】渲染控制

最新推荐文章于 2025-07-03 06:30:00 发布
最新推荐文章于 2025-07-03 06:30:00 发布
阅读量1k 收藏 16
点赞数 25
CC 4.0 BY-SA版权
分类专栏： hm 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 UI 图形渲染
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adsjgfjha123123/article/details/143920449

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

使用限制

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

键值生成规则

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

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

组件创建规则

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

首次渲染

生成不同键值

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

/** BasicDataSource代码见文档末尾附件: string类型数组的BasicDataSource代码 **/

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渲染的数据项键值均相同，在滑动过程中，LazyForEach会对划入划出当前页面的子组件进行预加载，而新建的子组件和销毁的原子组件具有相同的键值，框架可能存在取用缓存错误的情况，导致子组件渲染有问题。

/** BasicDataSource代码见文档末尾附件: string类型数组的BasicDataSource代码 **/

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) => 'same key')
    }.cachedCount(5)
  }
}

运行效果如下图所示。

图2 LazyForEach存在相同键值
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

非首次渲染

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

添加数据
/** BasicDataSource代码见文档末尾附件: string类型数组的BasicDataSource代码 **/

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便会在该索引处新建子组件。

运行效果如下图所示。

图3 LazyForEach添加数据
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

删除数据
/** BasicDataSource代码见文档末尾附件: string类型数组的BasicDataSource代码 **/

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);
  }
  
  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便会在该索引处删除对应子组件。

运行效果如下图所示。

图4 LazyForEach删除数据
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

交换数据
/** BasicDataSource代码见文档末尾附件: string类型数组的BasicDataSource代码 **/

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);
  }
  
  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方法，该方法会将数据源对应数据移动到预期的位置并调用notifyDataMove方法。在notifyDataMove方法内会又调用listener.onDataMove方法，该方法通知LazyForEach在该处有数据需要移动，LazyForEach便会将from和to索引处的子组件进行位置调换。

运行效果如下图所示。

图5 LazyF

最低0.47元/天 解锁文章

200万优质内容无限畅学
鸿蒙开发渲染控制【LazyForEach：数据懒加载】
2401_82772199的博客
07-31 666
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
（五）鸿蒙HarmonyOS主力开发语言ArkTS-数据懒加载(LazyForEach)
qq_44160056的博客
04-01 2629
系列文章目录 （一）鸿蒙HarmonyOS开发基础 （二）鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 （三）鸿蒙HarmonyOS主力开发语言ArkTS-状态管理 （四）鸿蒙HarmonyOS主力开发语言ArkTS-渲染控制 文章目录系列文章目录LazyForEach：数据懒加载接口描述IDataSource类型说明DataChangeListener类型说明使用限制键值生成规则组件创建规则首次渲染 LazyForEach：数据懒加载 LazyForEach从提供的数据源中按需迭代数据，并在
鸿蒙 LazyForEach实现按需加载
最新发布
梦想不只是梦与想的博客
07-03 557
摘要：鸿蒙系统中的IDataSource接口是数据源管理核心，为列表组件提供标准化数据访问和动态更新能力。主要功能包括：①数据抽象与UI解耦；②支持数据变化自动刷新；③结合LazyForEach优化性能。开发流程包括实现自定义数据源类、注册监听器、UI绑定等步骤，特别适合处理动态数据的长列表场景。该接口通过按需加载机制显著提升性能，优于直接数组绑定和@State管理方式。使用时需注意在页面销毁时取消监听，大数据集优先采用LazyForEach渲染。（148字）
鸿蒙应用开发--鸿蒙 LazyForEach 组件详解
2401_88846919的博客
03-06 2109
LazyForEach 是处理鸿蒙超长列表的黄金工具，开发者需重点掌握。，避免一次性渲染全部内容导致的内存和性能问题。LazyForEach 是鸿蒙 ArkUI 框架中用于。通过合理配置，可轻松实现万级数据列表的流畅滚动体验。的核心组件，专为处理。提供复用实例/新建组件。
鸿蒙HarmonyOS开发：懒加载(LazyForEach)、瀑布流组件(WaterFlow)
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
09-20 2112
懒加载LazyForEach是一种延迟加载的技术，它是在需要的时候才加载数据或资源，并在每次迭代过程中创建相应的组件，而不是一次性将所有内容都加载出来。懒加载通常应用于长列表、网格、瀑布流等数据量较大、子组件可重复使用的场景，当用户滚动页面到相应位置时，才会触发资源的加载，以减少组件的加载时间，提高应用性能，提升用户体验。在声明式描述语句中，有两种方式控制列表、网格等容器类组件的渲染，分别为循环渲染（ForEach）和数据懒加载（LazyForEach）。
鸿蒙HarmonyOS 5.0开发：LazyForEach：数据懒加载
m0_73088370的博客
12-15 1274
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
鸿蒙Harmony应用开发—ArkTS-LazyForEach：数据懒加载
m0_64420071的博客
03-23 2312
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
HarmonyOS/OpenHarmony应用开发之ArkTS LazyForEach数据懒加载详解与实践
02-16
内容概要：本文档深入解析了HarmonyOS/OpenHarmony系统下ArkTS语言渲染机制，尤其侧重LazyForEach控件的详细讲解，介绍它的接口、参数配置、数据源管理及变化监听机制等内容。文中还涉及LazyForEach的具体限制条件，...
[鸿蒙] --- 使用LazyForEach懒加载数据列表
qq_45774739的博客
06-03 3073
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。简而言之，其实它和前端的虚拟列表基本一样，只渲染可见区域的数据，来提升页面的响应速度，减少卡顿。
鸿蒙开发之LazyForEach及刷新问题
Lu_Ca的博客
02-20 3821
在开发过程中会遇到list、grid的item过多的情况。例如某些新闻类、某些购物类的页面，如果我们有大量的数据，直接通过ForEach进行全量渲染会直接把手机卡死。这样肯定是不行的，这个时候LazyForEach就该登场了。LazyForEach主要是用来针对列表数据量大、列表组件复杂的场景，减少了页面一次性加载数据的时间消耗，减少了内存峰值。可以显著提升页面的能效比和用户体验。实现原理就是它会从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
鸿蒙开发笔记-11-LazyForEach 数据懒加载
o118abcdef的博客
03-11 1359
LazyForEach作为鸿蒙长列表渲染的核心方案，其高效性来源于精妙的动态加载+组件复用双重机制。键值生成规则必须保证全局唯一性数据更新必须通过规范操作结合@Reusable实现组件级复用优化合理配置平衡性能与内存。
懒加载
12-14 5715
1、懒加载：是指程序推迟访问数据库，这样做可以保证有时候不必要的访问数据库，因为每次访问数据库都是比较耗时的即只有真正使用该对象的数据时才会创建。Hibernate中主要是通过代理机制来实现延迟加载：Hibernate从数据库获取某一个对象数据时、获取某一个对象的集合属性值时，或获取某一个对象所关联的另一个对象时，由于没有使用该对象的数据，hibernate并不是数据库加载真正的数据，而只是为该对
数据懒加载
HQ\(^o^)/的博客
07-19 601
数据懒加载的实现
LazyForEach：数据懒加载
hhhhhh5666的博客
09-07 1316
LazyForEach：数据懒加载
HarmonyOS Next应用开发——LazyForEach数据懒加载
高心星的专栏
09-26 749
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。并提供数据源改变的相关操作方法,每次更新数据源都要刷新所有的数据监听器。数据源需要自己封装成一个类并实现IDataSource接口。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值