《HarmonyOSNext教學寶典：ForEach數組渲染全攻略與性能優化》
#HarmonyOS開發 #ArkTS實戰 #組件解析

🎯 ForEach組件完全指南：數組循環渲染核心機制

舉個栗子🌰：
ForEach相當于智能印刷機，將數組元素自動轉化為UI組件！關鍵規則：??必須搭配特定容器??（如List中的ListItem）

// 標準結構 ↓
ForEach(this.dataArray, (item: ItemType) => { /* 創建組件 */ }, (item: ItemType) => item.id /* 鍵值生成器 */
)

---

🔑 鍵值生成：組件的身份標識系統

ArkUI通過唯一鍵值(key) 追蹤組件狀態：

鍵值生成方式	使用場景	風險提示
(item,index) => index	臨時測試	數據變動導致組件錯亂 ??
item => item	基礎類型不重復數組	值重復時渲染異常 ??
item => item.id	含ID的對象數組	推薦方案?

📌 核心原則：鍵值重復會造成組件復用混亂（詳見問題排查章節）

---

🏗? 組件創建邏輯解析

場景1：首次渲染（新數組）

@State fruits: string[] = ['🍎','🍌','🍇'];build() {// 鍵值使用水果名稱（僅限不重復數組）ForEach(this.fruits, (fruit) => {Text(fruit).fontSize(20) }, (fruit) => fruit)
}

輸出結果：
🍎→新建組件 | 🍌→新建組件 | 🍇→新建組件

---

場景2：數據更新（非首次渲染）

點擊修改第三個元素：

Button('更新').onClick(() => {this.fruits[2] = '🥝' // 替換元素
})

元素	舊鍵值	新鍵值	結果
🍎	🍎	🍎	復用
🍌	🍌	🍌	復用
🥝	🍇	🥝	新建

💡 關鍵結論：僅鍵值變化的元素觸發新建組件

---

🚀 四大實戰模板

模板1：骨架屏加載

@State skeletonData: number[] = [1,2,3,4,5] ForEach(this.skeletonData, () => ArticleSkeletonView(), (num) => num.toString() // 數字鍵值避沖突
)

---

模板2：加載更多功能

List().onReachEnd(() => {// ? 正確操作：追加含ID的新對象this.newsList.push({id: Date.now(), title:'最新消息'})
})ForEach(this.newsList, (news) => NewsCard({news}),(news) => news.id // ID鍵值保證精準更新
)

---

模板3：屬性監聽（點贊功能）

// 關鍵配置
@Observed class Post {likesCount: number = 0 
}@Component
struct PostCard {@ObjectLink post: Postbuild() {Button(`點贊 ${this.post.likesCount}`).onClick(() => this.post.likesCount++)}
}

---

模板4：拖拽排序

ForEach(this.dragItems, (item) => {ListItem() { ... }.onMove((from, to) => {// ? 維持鍵值不變，僅交換數組位置const movingItem = this.dragItems.splice(from,1)[0]this.dragItems.splice(to, 0, movingItem)})
}, (item) => item.id) // 固定ID鍵值！

---

?? 常見問題排查表

現象	錯誤原因	解決方案
新增數據渲染缺失	使用索引(index)當鍵值	改用對象唯一ID
拖拽后組件閃退	數據重組時生成了新鍵值	保持原始對象引用
屬性更新界面不變	直接替換整個對象	僅修改對象屬性字段
滾動加載全部重渲染	鍵值生成規則不高效	聲明簡單穩定鍵值（如ID）

---

💎 開發規范精要

// ? 安全高效的黃金寫法
ForEach(數據源, (item) => 組件實例, (item) => item.uniqueID // 三點核心價值：
)

1. 精準更新 - 避免全量重渲染
2. 數據安全 - 防止組件復用錯亂
3. 性能保障 - 減少重復創建損耗

📢 重要提醒：

• 基礎類型數組建議轉為{id:number, value:any}對象結構
• 動態數組操作必須使用push()/splice()等變更檢測方法