一、條件渲染（if）

1、定義
正如其他語(yǔ)言中的if…else…語(yǔ)句，ArkTS提供了渲染控制的能力，條件渲染可根據(jù)應(yīng)用的不同狀態(tài)，使用if、else和else if渲染對(duì)應(yīng)狀態(tài)下的UI內(nèi)容。
語(yǔ)法結(jié)構(gòu)為：if(條件表達(dá)式/布爾值){ ... }else{ ... }

2、使用規(guī)則

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

3、更新機(jī)制
當(dāng)條件語(yǔ)句使用狀態(tài)變量時(shí)且if、else if后跟隨的狀態(tài)判斷中使用的狀態(tài)變量值變化時(shí)，條件渲染語(yǔ)句會(huì)進(jìn)行更新，更新步驟如下：

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

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

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

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

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

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

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

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

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

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

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

@Entry
@Component
struct Index {@State message: string = '循環(huán)渲染'//創(chuàng)建一個(gè)對(duì)象數(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渲染：遍歷每一個(gè)數(shù)據(jù)并用Text呈現(xiàn)在UI界面上//第一個(gè)參數(shù)為需要遍歷的數(shù)組，第二參數(shù)為對(duì)每個(gè)遍歷元素進(jìn)行操作的函數(shù)，第三參數(shù)為返回的每一個(gè)元素索引（唯一值）//此處總共遍歷3個(gè)項(xiàng)目，每一個(gè)項(xiàng)目下面都有三個(gè)元素：id,name,ageForEach(this.obj,(item1)=>{Text(`${item1.id}=> ${item1.name}=> ${item1.age} `).fontSize(30).fontStyle(FontStyle.Italic)},(item2)=>{return item2.id//錯(cuò)誤示范：return item2})}.width('100%')}.height('100%')}
}