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

鸿蒙开发：ForEach中为什么键值生成函数很重要

article 2024/11/24 16:39:27

前言

在列表组件使用的时候，如List、Grid、WaterFlow等，循环渲染时都会使用到ForEach或者LazyForEach，当然了，也有单独使用的场景，如下，一个很简单的列表组件使用，这种使用方式，在官方的很多案例中也多次出现，相信在实际的开发中多多少少也会存在。

List({ space: 20, initialIndex: 0 }) {
      ForEach(["条目1", "条目2", "条目3", "条目4", "条目5", "条目6"], (item: string) => {
        ListItem() {
          Text(item)
            .width('100%')
            .height(50)
            .fontSize(16)
            .fontColor(Color.White)
            .textAlign(TextAlign.Center)
            .backgroundColor(Color.Orange)
        }
      }, (item: string) => item)
    }.padding({ left: 20, right: 20 })

以上的代码，看上去也没啥问题，UI也能正常的展示出来，如下图：

仿佛这一切都是正确的，但是，以上的代码会存在一定的问题，那就是渲染非预期，我们继续验证问题所在，增加一个按钮，用来添加数据，当然了这里需要把数据源提取至成员变量，并用@State装饰器进行修饰：

 @State list: string[] = ["条目1", "条目2", "条目3", "条目4", "条目5", "条目6"]

  build() {
    Column() {
      Button("追加数据").onClick(() => {
        this.list.push("条目七")
        this.list.push("条目八")
      })
      List({ space: 20, initialIndex: 0 }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .width('100%')
              .height(50)
              .fontSize(16)
              .fontColor(Color.White)
              .textAlign(TextAlign.Center)
              .backgroundColor(Color.Orange)
          }
        }, (item: string) => item)
      }.padding({ left: 20, right: 20 })
      .margin({ top: 20 })
    }
  }

当我们点击追加数据按钮时，正常的情况会是，数组中增加数据，驱动UI更新，List组件应该会增加【条目七，条目八】两条数据。

确实，点击后，UI发生了变化，列表中增加了两条数据：

有问题吗？说了一大堆，程序这不执行挺正常的，哎，稍安勿躁，我们再次点击一下，正常的程序，会再次增加两条数据，对吧？

但是，问题来了，没有增加！！！，点击一百次也没有增加。

难道是重复的数据不能重复添加？这就很扯了吧，列表中不能出现重复的数据，这在任何一个系统中都是闻所未闻的奇观。

显然这些问题都不是，问题的原因就在于，循环的第三个参数：keyGenerator。

本文的主要内容如下：

1、了解循环ForEach/LazyForEach三个参数

2、了解键值生成规则

3、禁止渲染非预期情况

4、正确使用键值

5、使用相关总结

一、了解循环ForEach/LazyForEach三个参数

ForEach

 (arr: Array<any>, itemGenerator: (item: any, index: number) => void, keyGenerator?: (item: any, index: number) => string): ForEachAttribute;

LazyForEach

 (dataSource: IDataSource, itemGenerator: (item: any, index: number) => void, keyGenerator?: (item: any, index: number) => string): LazyForEachAttribute;

第一个参数arr/dataSource是数据源，用来渲染UI的数据，非常重要，渲染多少数据，动态增加数据，都是和它有着直接的关系，可以是任何类型的数组源，比如对象，字符串，数值，都可以。

第二个参数itemGenerator，是组件生成函数，目的为数组中的每个元素创建对应的组件，它是和第一个数据源是一一对应的。

第三个参数keyGenerator，是键值生成函数，为数据源arr的每个数组项生成唯一且持久的键值，其返回值，可以自己定义，如果自己定义，一定要是唯一的，如果不定义，会是默认的：(item: T, index: number) => { return index + '__' + JSON.stringify(item); }，默认的也能满足大部分的需求，所以，在实际的开发中，如果你很难决定唯一，那么直接用默认的就行。在前言中的问题，就是因为键值不唯一造成的。