ArkTs之:数据懒加载——LazyForEach的用法

本文主要是介绍ArkTs之:数据懒加载——LazyForEach的用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

官方描述

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

使用限制

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

实战

LazyForEach是专门用来进行数据懒加载的接口,非常适合大数据量渲染的场景,但是想使用它必须要先实现IDatasource接口才能使用,废话不多说,直接上代码:

//第一步:实现IDataSource接口
// RecommendDataSource.ets
import { Recommend_Item } from '../DataType/index';
export class RecommendDataSource implements IDataSource {// 数据源private recommends: Array<Recommend_Item>;// 监听器private listeners: DataChangeListener[] = [];constructor(data: Recommend_Item[]) {this.recommends = data;}// 返回数据源中的数据数量public totalCount(): number {return this.recommends.length;}// 根据索引返回数据项public getData(index: number): Recommend_Item {return this.recommends[index];}// 为 LazyForEach 组件注册监听器registerDataChangeListener(listener: DataChangeListener): void {if (this.listeners.indexOf(listener) < 0) {console.info('add listener');this.listeners.push(listener);}}// 为 LazyForEach 组件注销监听器unregisterDataChangeListener(listener: DataChangeListener): void {const pos = this.listeners.indexOf(listener);if (pos >= 0) {console.info('remove listener');this.listeners.splice(pos, 1);}}
}//第二步:在组件中引用并实例化
//Recommend.ets
import { Recommend_Item } from '../DataType/index';
import { RecommendDataSource } from '../MockData/RecommendDataSource';@Component
export struct Recommend {@Prop RecommendList: Array<Recommend_Item> = [];  // 默认初始化为空数组private dataSource: RecommendDataSource = new RecommendDataSource([]);//初始化aboutToAppear() {// 在生命周期钩子中重新初始化 dataSource（如果 RecommendList 有更新）this.dataSource = new RecommendDataSource(this.RecommendList);console.log('RecommendList updated:', JSON.stringify(this.RecommendList), JSON.stringify(this.dataSource))} build() {List({ space: 3 }) {LazyForEach(this.dataSource, (item: Recommend_Item, index: number) => {ListItem() {Row() {Text(item.type + '').fontSize(50).onAppear(() => {console.info("appear:" + item.type);});}.margin({ left: 10, right: 10 });}.onClick(() => {// 处理点击事件});}, (item: Recommend_Item) => item.type + '');}.cachedCount(5);}
}