ArkTS 实战：用 LazyForEach 让鸿蒙长列表不再卡顿

【痛点】用 ForEach 渲染几百条商品/消息列表时，页面会一次性创建全部 ListItem，首屏慢、滑动掉帧。LazyForEach 只创建可见区域及缓存区的组件，滑到哪、建到哪，是长列表的标准解法。
【关键区别】ForEach 要求完整数组；LazyForEach 要求一个实现 IDataSource 的数据源，由框架按需调用 getData(index)，数据变化时通过监听器通知刷新。
【核心代码】

import { IDataSource } from '@ohos.arkui.ui'; // 按实际 SDK 导入调整

@Observed
class Goods {
  constructor(public id: number, public name: string, public price: number) {}
}

class GoodsDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  constructor(private list: Goods[]) {}
  totalCount(): number { return this.list.length; }
  getData(index: number): Goods { return this.list[index]; }
  registerDataChangeListener(listener: DataChangeListener): void {
    if (!this.listeners.includes(listener)) this.listeners.push(listener);
  }
  unregisterDataChangeListener(listener: DataChangeListener): void {
    const i = this.listeners.indexOf(listener);
    if (i >= 0) this.listeners.splice(i, 1);
  }
  // 数据更新后调用：通知列表刷新对应区间
  notifyDataChange(start: number, count: number): void {
    this.listeners.forEach(l => l.onDataChange(start, count));
  }
}

@Entry
@Component
struct GoodsListPage {
  private dataSource: GoodsDataSource = new GoodsDataSource(
    Array.from({ length: 500 }, (_, i) => new Goods(i, `商品 ${i + 1}`, 9.9 + i))
  );

  build() {
    List({ space: 8 }) {
      LazyForEach(this.dataSource, (item: Goods) => {
        ListItem() {
          Row() {
            Text(item.name).fontSize(16)
            Blank()
            Text(`¥${item.price.toFixed(2)}`).fontSize(16).fontColor('#E64545')
          }.padding(12).width('100%')
        }
      }, (item: Goods) => item.id.toString())
    }
    .cachedCount(3) // 上下各多缓存 3 条，滑动更顺，内存可控
    .width('100%').height('100%')
  }
}

【三个要点】1) 必须给 LazyForEach 传 key 生成函数（上面用 id），否则数据增删后复用会错位；2) cachedCount 别设太大，3–5 条足够，太大又回到一次性建组件的老路；3) 只改数据不通知监听器，界面不会刷新，增删改后要调 notifyDataChange。
【小结】长列表先换 LazyForEach + IDataSource，再调 cachedCount 和 key，多数卡顿不用动架构就能解决。