前言

ForEach 是 ArkUI 中遍历数组渲染列表的组件。在「猫猫大作战」中，ForEach 用于渲染棋盘上的猫咪列表。

一、ForEach 基础

Column() {
  ForEach(this.cats, (cat: Cat) => {
    CatItem({ cat })
  }, (cat: Cat) => cat.id)  // key 生成器
}

二、key 的重要性

// ✅ 使用唯一 ID 作为 key
ForEach(this.cats, (cat) => { CatItem({ cat }) }, (cat) => cat.id)

// 🚫 不要用索引作为 key（列表变动时导致混乱）
ForEach(this.cats, (cat) => { CatItem({ cat }) }, (_, idx) => idx)

三、棋盘渲染

@State cats: Cat[] = [];

build() {
  Stack() {
    // 棋盘背景
    GameBoardGrid()

    // 猫咪覆盖层
    ForEach(this.cats, (cat: Cat) => {
      CatItem({
        cat: cat,
        onClick: () => this.onCatClick(cat)
      })
        .position({
          x: cat.x * 60,
          y: cat.y * 60,
        })
    }, (cat: Cat) => cat.id)
  }
}

四、更新性能

// 更新整个猫咪列表（游戏引擎每帧返回新数组）
updateCats(newCats: Cat[]): void {
  this.cats = newCats;  // ForEach 自动 diff 更新
  // key 不变则复用组件，key 变化则重建
}

五、ForEach vs LazyForEach

六、最佳实践

1. 始终提供 key：使用唯一 ID 而非索引
2. 不可变 key：key 在元素生命周期内不变
3. 适量数据用 ForEach：猫咪列表 40 条以内
4. 大量数据用 LazyForEach：排行榜用延迟加载

总结

ForEach 遍历数组渲染列表，配合唯一 key 高效更新。核心要点：cat.id 唯一 key、 数据量小用 ForEach、 数据量大用 LazyForEach。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• ForEach 官方文档
• 第 123 篇：sort
• 第 125 篇：merge-detect
• 第 126 篇：level-up