OpenHarmony列表组件如何复用

在 OpenHarmony（ArkUI） 中，列表组件复用主要通过 LazyForEach + 组件复用机制（@Reusable） 来实现，目的是减少组件创建/销毁开销，提升长列表性能。

下面按使用场景 → 实现方式 → 示例代码来说明。

一、核心复用机制

1️⃣ LazyForEach（必须）

用于按需加载列表数据，只创建可视区域内的组件。

LazyForEach(
  dataSource,
  (item) => {
    ListItem() {
      MyItem({ item: item })
    }
  },
  item => item.id
)

❌ ForEach 不适合长列表（会一次性创建）

2️⃣ @Reusable（组件级复用）

OpenHarmony 提供 组件复用注解，让 Item 在滑出可视区后被回收复用。

@Reusable
@Component
struct MyItem {
  @State item: ItemData = new ItemData()

  aboutToReuse(params: { item: ItemData }) {
    this.item = params.item
  }

  build() {
    Text(this.item.title)
  }
}

✅ 系统会在滚动时：

• 回收不可见的 Item
• 复用其节点
• 调用 aboutToReuse 更新数据

二、完整列表复用示例

1️⃣ 数据模型

class ItemData {
  id: string = ''
  title: string = ''
}

2️⃣ 数据源（IDataSource）

class MyDataSource implements IDataSource {
  private list: ItemData[] = []

  totalCount(): number {
    return this.list.length
  }

  getData(index: number): ItemData {
    return this.list[index]
  }

  registerDataChangeListener() {}
  unregisterDataChangeListener() {}
}

3️⃣ 可复用 Item

@Reusable
@Component
struct MyItem {
  @State item: ItemData = new ItemData()

  aboutToReuse(params: { item: ItemData }) {
    this.item = params.item
  }

  build() {
    Row() {
      Text(this.item.title)
        .fontSize(16)
    }
    .height(60)
  }
}

4️⃣ List 使用

@Entry
@Component
struct Page {
  private data = new MyDataSource()

  aboutToAppear() {
    for (let i = 0; i < 1000; i++) {
      this.data.list.push({
        id: i.toString(),
        title: 'Item ' + i
      })
    }
  }

  build() {
    List() {
      LazyForEach(this.data, (item: ItemData) => {
        ListItem() {
          MyItem({ item })
        }
      }, item => item.id)
    }
  }
}

三、复用关键点总结

✅ 必须做

• 使用 LazyForEach
• Item 组件加 @Reusable
• 使用 aboutToReuse 更新数据

❌ 避免

• 使用 ForEach 渲染长列表
• 在 Item 里频繁创建复杂对象
• 在 build 中写重逻辑

四、性能建议

• Item 高度尽量固定
• 图片使用 cachedCount
• 复杂列表可结合 Swiper / Grid 复用策略

如果你用的是 API 9 / 10 / 11 或 ArkTS / eTS，我可以给你对应版本的示例，或者帮你优化某个具体列表场景。