一、條件渲染（if）

1、定義
正如其他語言中的if…else…語句，ArkTS提供了渲染控制的能力，條件渲染可根據應用的不同狀態(tài)，使用if、else和else if渲染對應狀態(tài)下的UI內容。
語法結構為：if(條件表達式/布爾值){ ... }else{ ... }

2、使用規(guī)則

（1）if、else if后跟隨的條件語句可以使用狀態(tài)變量。
（2）條件渲染語句在涉及到組件的父子關系時是“透明”的，當父組件和子組件之間存在一個或多個if語句時，必須遵守父組件關于子組件使用的規(guī)則。
（3）允許在容器組件內使用，通過條件渲染語句構建不同的子組件。
（4）每個分支內部的構建函數(shù)必須遵循構建函數(shù)的規(guī)則，并創(chuàng)建一個或多個組件。無法創(chuàng)建組件的空構建函數(shù)會產生語法錯誤。

3、更新機制
當條件語句使用狀態(tài)變量時且if、else if后跟隨的狀態(tài)判斷中使用的狀態(tài)變量值變化時，條件渲染語句會進行更新，更新步驟如下：

• 評估if和else if的狀態(tài)判斷條件，如果分支沒有變化，請無需執(zhí)行以下步驟。如果分支有變化，則執(zhí)行2、3步驟：
• 刪除此前構建的所有子組件。
• 執(zhí)行新分支的構造函數(shù)，將獲取到的組件添加到if父容器中。如果缺少適用的else分支，則不構建任何內容。

二、循環(huán)渲染（ForEach）

1、定義
ForEach接口基于數(shù)組類型數(shù)據來進行循環(huán)渲染，需要與容器組件配合使用，作用就是***遍歷每一個數(shù)據并用Text呈現(xiàn)在UI界面上。***語法結構如下：

ForEach(//數(shù)據源，為Array類型的數(shù)組。arr: Array,//組件生成函數(shù)itemGenerator: (item: any, index?: number) => void,//鍵值生成函數(shù)keyGenerator?: (item: any, index?: number): string => string
)

簡答來說共有3個參數(shù)，第一個參數(shù)為需要遍歷的數(shù)組，第二個參數(shù)為對每個遍歷元素進行操作的函數(shù)，第三個參數(shù)為返回的每一個元素索引（唯一值，不能重復）。
詳細參數(shù)介紹參考HarmonyOS的ArkTS語法官方文檔：ForEach：循環(huán)渲染

2、鍵值生成規(guī)則

在ForEach循環(huán)渲染過程中，系統(tǒng)會為每個數(shù)組元素生成一個唯一且持久的鍵值，用于標識對應的組件。當這個鍵值變化時，ArkUI框架將視為該數(shù)組元素已被替換或修改，并會基于新的鍵值創(chuàng)建一個新的組件。

ForEach提供了一個名為keyGenerator的參數(shù)，這是一個函數(shù)，開發(fā)者可以通過它自定義鍵值的生成規(guī)則。如果開發(fā)者沒有定義keyGenerator函數(shù)，則ArkUI框架會使用默認的鍵值生成函數(shù)

3、ForEach案例一：遍歷數(shù)組并依次呈現(xiàn)

@Entry
@Component
struct Index {@State message: string = '循環(huán)渲染'//創(chuàng)建一個景色數(shù)組@State scenery: Array<string> = ['江上','清風','山間','明月','造物者']build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Divider()//使用ForEach渲染：遍歷每一個數(shù)據并用Text呈現(xiàn)在UI界面上//第一個參數(shù)為需要遍歷的數(shù)組，第二參數(shù)為對每個遍歷元素進行操作的函數(shù)，第三參數(shù)為返回的每一個元素索引（唯一值）ForEach(this.scenery,(item1)=>{Text(item1).fontSize(30).fontStyle(FontStyle.Italic)},(item2)=>{return item2})}.width('100%')}.height('100%')}
}

4、ForEach案例二：遍歷Object對象并依次呈現(xiàn)元素內容

@Entry
@Component
struct Index {@State message: string = '循環(huán)渲染'//創(chuàng)建一個對象數(shù)組@State obj:object[] = [{id:'001',name:'江上',age:16},{id:'002',name:'明月',age:25},{id:'003',name:'造物者',age:35}]build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Divider()//使用ForEach渲染：遍歷每一個數(shù)據并用Text呈現(xiàn)在UI界面上//第一個參數(shù)為需要遍歷的數(shù)組，第二參數(shù)為對每個遍歷元素進行操作的函數(shù)，第三參數(shù)為返回的每一個元素索引（唯一值）//此處總共遍歷3個項目，每一個項目下面都有三個元素：id,name,ageForEach(this.obj,(item1)=>{Text(`${item1.id}=> ${item1.name}=> ${item1.age} `).fontSize(30).fontStyle(FontStyle.Italic)},(item2)=>{return item2.id//錯誤示范：return item2})}.width('100%')}.height('100%')}
}