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影响。 |
键值生成规则
在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)
}
}
