OpenHarmony列表组件怎样复用

在 OpenHarmony（ArkUI） 中，列表组件的“复用”主要指 ListItem 的视图复用机制，用于提升长列表性能和内存效率。下面按常见场景给你说明。

一、List 的自动复用机制（最常用）

OpenHarmony 的 List + ForEach / LazyForEach 默认支持 Item 复用：

List() {
  ForEach(this.dataList, (item) => {
    ListItem() {
      Text(item.title)
    }
  }, item => item.id)
}

✅ 特点：

• 滚动出屏幕的 ListItem 会被回收
• 滚动回来时复用已有组件实例
• 不需要手动管理

⚠️ 注意：

• 必须提供唯一 key（item => item.id）
• Item 结构应尽量一致，避免频繁切换组件类型

二、使用 LazyForEach（大数据量推荐）

当数据量很大（上千条）时，用 LazyForEach 才是真正的“按需创建 + 复用”。

List() {
  LazyForEach(this.dataSource, (item) => {
    ListItem() {
      Text(item.title)
    }
  }, item => item.id)
}

DataSource 示例

class MyDataSource extends BasicDataSource {
  totalCount(): number {
    return this.data.length
  }

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

✅ 优势：

• 只创建可视区域 Item
• 滚动时复用 Item 节点
• 显著降低内存占用

三、手动控制复用（@Reusable 装饰器）

OpenHarmony 支持 自定义组件复用，适合复杂 Item。

1️⃣ 标记可复用组件

@Reusable
@Component
struct ItemView {
  @State title: string = ''

  aboutToReuse(params: { title: string }) {
    this.title = params.title
  }

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

2️⃣ 在 List 中使用

List() {
  LazyForEach(this.dataSource, (item) => {
    ListItem() {
      ItemView({ title: item.title })
    }
  }, item => item.id)
}

✅ 复用流程：

• 滑出屏幕 → 组件缓存
• 滑入屏幕 → 调用 aboutToReuse
• 不重新执行 build

四、复用时的注意事项（很重要）

❌ 不要在 Item 中做这些

• 每次 build 都创建新对象
• 使用随机布局
• 改变组件类型（Text ↔ Image）

✅ 推荐做法

• 固定 Item 高度（或预估高度）
• 使用 @State / @Prop 控制状态
• 数据驱动 UI，而不是命令式修改

五、性能对比建议

如果你愿意，我可以：

• 给你一个 完整可运行 Demo
• 或针对你用的 OpenHarmony 版本（3.x / 4.x） 具体说明
• 或讲 List 复用失败的常见坑

你现在是做哪种列表？