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

鸿蒙HarmonyOS list优化一： list 结合 lazyforeach用法

news 来源：原创 2025/7/21 2:27:27

list列表是开发中不可获取的，非常常用的组件，使用过程中会需要不断的优化，接下来我会用几篇文章进行list在纯原生的纯血鸿蒙的不断优化。我想进大厂，希望某位大厂的看到后能给次机会。

首先了解一下lazyforeach：

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

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

参数名	类型	必填	说明
dataSource	IDataSource	是	LazyForEach数据源，需要开发者实现相关接口。
itemGenerator	(item: Object, index: number) => void	是	子组件生成函数，为数组中的每一个数据项创建一个子组件。说明： - item是当前数据项，index是数据项索引值。 - itemGenerator的函数体必须使用大括号{...}。 - itemGenerator每次迭代只能并且必须生成一个子组件。 - itemGenerator中可以使用if语句，但是必须保证if语句每个分支都会创建一个相同类型的子组件。
keyGenerator	(item: Object, index: number) => string	否	键值生成函数，用于给数据源中的每一个数据项生成唯一且固定的键值。修改数据源中的一个数据项若不影响其生成的键值，则对应组件不会被更新，否则此处组件就会被重建更新。keyGenerator参数是可选的，但是，为了使开发框架能够更好地识别数组更改并正确更新组件，建议提供。说明： - item是当前数据项，index是数据项索引值。 - 数据源中的每一个数据项生成的键值不能重复。 - keyGenerator缺省时，使用默认的键值生成函数，即(item: Object, index: number) => { return viewId + '-' + index.toString(); }，生成键值仅受索引值index影响。

参数名

类型

必填

说明

dataSource

IDataSource

是

LazyForEach数据源，需要开发者实现相关接口。

itemGenerator

(item: Object, index: number) => void

是

子组件生成函数，为数组中的每一个数据项创建一个子组件。

说明：

- item是当前数据项，index是数据项索引值。

- itemGenerator的函数体必须使用大括号{...}。

- itemGenerator每次迭代只能并且必须生成一个子组件。

- itemGenerator中可以使用if语句，但是必须保证if语句每个分支都会创建一个相同类型的子组件。

keyGenerator

(item: Object, index: number) => string

否

键值生成函数，用于给数据源中的每一个数据项生成唯一且固定的键值。修改数据源中的一个数据项若不影响其生成的键值，则对应组件不会被更新，否则此处组件就会被重建更新。keyGenerator参数是可选的，但是，为了使开发框架能够更好地识别数组更改并正确更新组件，建议提供。

说明：

- item是当前数据项，index是数据项索引值。

- 数据源中的每一个数据项生成的键值不能重复。

- keyGenerator缺省时，使用默认的键值生成函数，即(item: Object, index: number) => { return viewId + '-' + index.toString(); }，生成键值仅受索引值index影响。

键值生成规则

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

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

组件创建规则

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

简单样例：

/** BasicDataSource代码见文档末尾BasicDataSource示例代码: string类型数组的BasicDataSource代码 **/
// azyForEach数据源，实现相关接口model。
class MyDataSource extends BasicDataSource {private dataArray: string[] = [];public totalCount(): number {return this.dataArray.length;}public getData(index: number): string {return this.dataArray[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)//保证item key键不相同 不然会有错误惊喜 哈哈}.cachedCount(5)}
}

首先了解一下lazyforeach：

键值生成规则

组件创建规则

相关文章：