前面我们学习过 ForEach，它的缺点是不能按需加载，有多少数据加载多少数据，十分的占内存：

而 LazyForEach 可以做到懒加载，也就是按需加载，节约内存：

LazyForEach 基本使用

LazyForEach 用起来和 ForEach 差不多，只不过在数据源的写法有很大的不同。

写起来有点繁琐，需要一点耐心。

第一步，数据源必须实现 IDataSource 接口。

IDataSource 接口：

declare interface IDataSource {
    /**
     * 数据总数
     */
    totalCount(): number;
    /**
     * 获取指定索引的数据
     */
    getData(index: number): any;
    /**
     * 注册数据改变监听
     */
    registerDataChangeListener(listener: DataChangeListener): void;
    /**
     * 注销数据改变监听
     */
    unregisterDataChangeListener(listener: DataChangeListener): void;
}

实现类：

/**
 * 数据源基类
 */
class BaseDataSource <T> implements IDataSource {
  /**
   * 数据源
   */
  public datas: T[] = []

  /**
   * 获取数据总数
   */
  totalCount(): number {
    return this.datas.length
  }

  /**
   * 获取指定位置的数据
   */
  getData(index: number): T {
    return this.datas[index]
  }

  /**
   * 注册数据时调用
   */
  registerDataChangeListener(listener: DataChangeListener) {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  /**
   * 注销数据时调用
   */
  unregisterDataChangeListener(listener: DataChangeListener) {
    const index = this.listeners.indexOf(listener)
    if (index >= 0) {
      this.listeners.splice(index, 1)
    }
  }
}

第二步，数据源必须要有数据更改监听器。

DataChangeListener 接口：

declare interface DataChangeListener {
    /**
     * 重新加载数据时的通知
     */
    onDataReloaded(): void;
    /**
     * 添加数据时的通知
     */
    onDataAdd(index: number): void;
    /**
     * 移动数据时的通知
     */
    onDataMove(from: number, to: number): void;
    /**
     * 删除数据时的通知
     */
    onDataDelete(index: number): void;
    /**
     * 更改数据时的通知
     */
    onDataChange(index: number): void;
}

实现类：

/**
 * 数据源基类
 */
class BaseDataSource <T> implements IDataSource {
  /**
   * 数据更改监听器列表
   */
  private listeners: DataChangeListener[] = []
  /**
   * 数据源
   */
  public datas: T[] = []

  /**
   * 获取数据总数
   */
  totalCount(): number {
    return this.datas.length
  }

  /**
   * 获取指定位置的数据
   */
  getData(index: number): T {
    return this.datas[index]
  }

  /**
   * 注册数据时调用
   */
  registerDataChangeListener(listener: DataChangeListener) {
    if (this.listeners.indexOf(listener) < 0) {
      this.listeners.push(listener)
    }
  }

  /**
   * 注销数据时调用
   */
  unregisterDataChangeListener(listener: DataChangeListener) {
    const index = this.listeners.indexOf(listener)
    if (index >= 0) {
      this.listeners.splice(index, 1)
    }
  }

  /**
   * 重新加载数据通知
   */
  notifyDataReloaded() {
    this.listeners.forEach(listener => listener.onDataReloaded())
  }

  /**
   * 添加数据通知
   */
  notifyDataAdd(index: number) {
    this.listeners.forEach(listener => listener.onDataAdd(index))
  }

  /**
   * 数据移动通知
   */
  notifyDataMove(from: number, to: number) {
    this.listeners.forEach(listener => listener.onDataMove(from, to))
  }

  /**
   * 删除数据通知
   */
  notifyDataDelete(index: number) {
    this.listeners.forEach(listener => listener.onDataDelete(index))
  }

  /**
   * 改变数据通知
   */
  notifyDataChange(index: number) {
    this.listeners.forEach(listener => listener.onDataChange(index))
  }
}

第三步，继承数据源基类 BaseDataSource，实现数据的增删改查。

Article 文章类：

/**
 * 文章
 */
class Article {
  /**
   * ID
   */
  id: string
  /**
   * 标题
   */
  title: string

  constructor(id: string, title: string) {
    this.id = id
    this.title = title
  }
}

Article 文本数据源：

/**
 * 文章数据源
 */
class ArticleDataSource extends BaseDataSource<Article> {
  /**
   * 向指定位置添加数据
   *
   * @param index 位置
   * @param data 数据
   */
  addData(index: number, data: Article) {
    this.datas.splice(index, 0, data)
    this.notifyDataAdd(index)
  }

  /**
   * 在末尾添加数据
   *
   * @param data 数据
   */
  pushData(data: Article) {
    this.datas.push(data)
    this.notifyDataAdd(this.datas.length - 1)
  }

  /**
   * 改变指定位置的数据
   *
   * @param index 位置
   * @param data 数据
   */
  changeData(index: number, data: Article) {
    this.datas.splice(index, 1, data)
    this.notifyDataChange(index)
  }

  /**
   * 删除指定位置的数据
   *
   * @param index 位置
   */
  deleteData(index: number) {
    this.datas.splice(index, 1)
    this.notifyDataDelete(index)
  }
}

第四步，使用 Article 数据源。

@Entry
@Component
struct Index {
  /**
   * 文章数据源
   */
  articleDataSource: ArticleDataSource = new ArticleDataSource()

  aboutToAppear() {
    // 填充文章数据
    for (let i = 0; i < 30; i++) {
      this.articleDataSource.pushData(new Article(i.toString(), `数据${i}`))
    }
  }

  build() {
    Column() {
      List({ space: 8 }) {
        LazyForEach(this.articleDataSource, (item: Article) => {
          ListItem() {
            Item({ article: item })
          }
        }, (item: Article) => item.id)
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .padding(16)
  }
}

@Component
struct Item {
  article: Article

  aboutToAppear() {
    console.log(`组件已创建：${this.article.title}`)
  }

  build() {
    Text(this.article.title)
      .fontSize(30)
  }
}

运行结果：

控制台输出：

首次加载数据 19 个，并没有把 30 个数据都加载完：

组件已创建：数据0
组件已创建：数据1
组件已创建：数据2
组件已创建：数据3
组件已创建：数据4
组件已创建：数据5
组件已创建：数据6
组件已创建：数据7
组件已创建：数据8
组件已创建：数据9
组件已创建：数据10
组件已创建：数据11
组件已创建：数据12
组件已创建：数据13
组件已创建：数据14
组件已创建：数据15
组件已创建：数据16
组件已创建：数据17
组件已创建：数据18

滚动列表一次：

组件已创建：数据19
组件已创建：数据20
组件已创建：数据21
组件已创建：数据22
组件已创建：数据23

滚动列表两次：

组件已创建：数据24
组件已创建：数据25
组件已创建：数据26
组件已创建：数据27
组件已创建：数据28
组件已创建：数据29

从运行结果来看，数据的确是懒加载，显示多少数据加载多少数据。

在日常开发中，LazyForEach 是加载列表数据的首选。希望大家可以掌握它。