当前位置：首页 > article >正文

【HarmonyOS Next】鸿蒙循环渲染ForEach，LazyForEach，Repeat使用心得体会

article 2025/2/25 15:44:33

【HarmonyOS Next】鸿蒙循环渲染ForEach，LazyForEach，Repeat使用心得体会

一、ForEach，LazyForEach，Repeat三者关系

在鸿蒙中列表组件循环渲染的实现，一般都是通过ForEach来配合列表容器组件实现，例如List。也可以直接ForEach去创建多个相同的View。

以下代码，是个简单的ForEach使用。在list组件中通过包裹ForEach来循环渲染创建子组件。数据通过传入数组对象的形式，批量一次性循环渲染更新完数据。

需要注意的是，在ForEach组件进行非首次渲染时，它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在，则会创建一个新的组件；如果键值存在，则不会创建新的组件，而是直接渲染该键值所对应的组件。

作为移动开发转鸿蒙，笔者喜欢将列表容器的子组件称之为，ItemVIew。

渲染最终效果是，自上而下显示三行文本的垂直列表。

@Entry
@Component
struct ListPage {
  @State tempList: Array<string> = ['第一行代码', '开发艺术探索', '入门到精通'];

  build() {
    Row() {
      List() {
        ForEach(this.tempList, (item: string) => {
          ListItem(){
      		ItemView ({ item: item })
      		   .margin({top: 30})
		  }
        }, (item: string) => item)
      }
      .width('100%')
      .height('100%')
    }
    .alignListItem(ListItemAlign.Center)
    .height('100%')

  }
}

@Component
struct ItemView {
  @Prop item: string;

  build() {
    Text(this.item)
      .fontSize(50)
  }
}

使用起来相当简单，但是实际业务开发中，大批量的列表数据渲染还是用这种方式，在首次加载时会造成性能卡顿。例如我有一万条数据，那就需要创建一万个ItemVIew，渲染压力可见非常恐怖。

为了解决该问题，所以LazyForEach应运而生。这两者主要的区别就是数据不一次性加载渲染，**懒加载通过提供的数据源中按需迭代数据。**通过继承BasicDataSource来监听控制列表的数据源进行按需加载。

框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。【比起Android和IOS的回收机制，这里设计的并不完美。因为没有复用机制。】

正因为LazyForEach的不足点，所以V2中又提供了Repeat来实现循环回收复用机制，也简化了数据源控制刷新的模板代码。

二、ForEach，LazyForEach的局限性

ForEach
1.只能一次性渲染列表内所有数据去创建VIew，没办法按需加载，性能损耗严重，内存占用大。
2.索引自己维护，容易造成不可知的UI问题。例如索引一致后，UI刷新会异常。

LazyForEach：
1.只能在容器列表组件中使用
2.数据源的样板配置代码太过于冗余
3.回收机制，没有复用View，快速列表时，还是会有性能损耗

三、Repeat的优点和和使用介绍

Repeat提供了两种模式non-virtualScroll模式和virtualScroll模式。

non-virtualScroll模式类似于ForEach的使用。渲染短数据列表、组件全部加载的场景。

@Entry
@ComponentV2
struct ListPage {
  @Local tempList: Array<string> = ['第一行代码', '开发艺术探索', '入门到精通'];

  build() {
    Row() {
      Column() {
        Text('点击修改第1个数组项的值')
          .fontSize(24)
          .fontColor(Color.Red)
          .onClick(() => {
            this.simpleList[0] = 'HarmonyOS第一行代码';
          })

        Repeat<string>(this.tempList)
            .each((res: RepeatItem<string>)=>{
              ItemView({ item: res.item })
                .margin({top: 30})
            })
            .key((item: string) => item)
      }
      .justifyContent(FlexAlign.Center)
      .width('100%')
      .height('100%')
    }
    .height('100%')
    .backgroundColor(0xF1F3F5)
  }
}

@ComponentV2
struct ItemView {
  @Param @Require data: string;

  build() {
    Text(this.data)
      .fontSize(30)
  }
}