HarmonyOS应用开发实战：猫猫大作战-forEach 更新与列表渲染

前言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特性ForEachLazyForEach渲染策略全量渲染按需渲染数据量 100 条 100 条适用场景猫咪列表~40排行榜200六、最佳实践始终提供 key使用唯一 ID 而非索引不可变 keykey 在元素生命周期内不变适量数据用 ForEach猫咪列表 40 条以内大量数据用 LazyForEach排行榜用延迟加载总结ForEach 遍历数组渲染列表配合唯一 key 高效更新。核心要点cat.id唯一 key、 数据量小用 ForEach、 数据量大用 LazyForEach。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ForEach 官方文档第 123 篇sort第 125 篇merge-detect第 126 篇level-up