生命周期

任何程序都是有一定的生命周期的。生命周期是記錄從產生到銷毀的過程；如果熟悉前端vue.js的話，就可以很好的理解生命周期。

自定義組件生命周期

ArkTS中，自定義組件提供了兩個生命周期函數(shù)：aboutToAppear() 和aboutToDisappear()；由于生命周期函數(shù)是由系統(tǒng)來確定他調用的時機，所以無法手動調用回調函數(shù)
aboutToAppear(): 在build函數(shù)之前執(zhí)行對數(shù)據(jù)進行初始化
aboutToDisappear():銷毀時調用

@Component
export struct TitleComponent{@Link isRefreshData: boolean;message: string = 'Hello World111'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%').onClick(()=>{this.isRefreshData=!this.isRefreshData})}}aboutToAppear(){}aboutToDisappear(){}
}

頁面入口組件

被@Entry 裝飾的組件，系統(tǒng)還額外提供了三個函數(shù)：onPageShow()、onBackPress()、onPageHide();
onPageShow: 軟件進入頁面時執(zhí)行
onBackPress：返回時執(zhí)行
onPageHide：按手機home鍵返回手機主界面執(zhí)行

渲染控制

條件渲染

使用if/else if /else 進行條件渲染

@Component
export struct TitleComponent{@Link isRefreshData: boolean;message: string = 'Hello World111'build() {Row() {Column() {if(this.isRenderText()){Text(this.message+"111")}else{Text(this.message)}}}}isRenderText(){return false;}
}

循環(huán)渲染

使用ForEach 迭代數(shù)組，并為每個數(shù)組項創(chuàng)建響應的組件；ForEach語法：
ForEach([],子組件的生成函數(shù)，鍵值生成器)

@Component
export struct TitleComponent{@Link isRefreshData: boolean;message: string = 'Hello World111'dataList:[]=[];build() {Row() {Column() {if(this.isRenderText()){Text(this.message+"111")}else{Text(this.message)}}}}@Builder genList(){Column(){List(){ForEach(this.dataList,(item:RankModel,index?:Number)=>{},(item:RankModel)=>JSON.stringify(item))}}}isRenderText(){return false;}
}

組件狀態(tài)管理裝飾器和@Builder裝飾器

@State

組件內部的狀態(tài)數(shù)據(jù)

@Prop

與@State有相同的語義，但初始化方式不同；
@Prop裝飾的變量必須使用其父組件的@State變量進行初始化，允許組件內部修改，但更改不會通知給父組件

@Link

可以和父組件@State 變量建立雙向數(shù)據(jù)綁定

@Builder

用于定義組件的聲明式UI描述，在一個自定義組件內快速生成多個布局內容