學習筆記—管理組件擁有的狀態(tài)（eTS）
原創(chuàng)??https://harmonyos.51cto.com??
前言
在學習ArkUI開發(fā)的過程中難免繞不開管理組件擁有的狀態(tài)。這個名詞聽起來可能比較高大尚可能有點聽不懂，但其實管理組件擁有的狀態(tài)就是@State、@Prop、@Link這三個關鍵字的使用。話不多說，這就開始今天的分享。
正文
@State
@State裝飾的變量是組件內部的狀態(tài)數(shù)據(jù)，當這些狀態(tài)數(shù)據(jù)被修改時，將會調用所在組件的build方法進行UI刷新。
@State可以去修飾class、number、boolean、string，以及這些類型的數(shù)組。
在定義一個被@State修飾的變量時要給該變量賦予初值，否則可能導致框架行為未定義。
在創(chuàng)建組件實例時，可以通過變量名顯式指定@State狀態(tài)屬性的初始值。
總的來說就是這個變量變化時會重新調用和該變量有用的組件重新進行刷新。
在一個簡單的demo中理解這個吧。在demo中我們用@State來修飾一個number型的變量，這個變量記錄的就是Text被點擊的次數(shù)，同時將變量實時顯示到Text中。
@State num:number = 0;
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('clicked times: ' + this.num)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(()=>{
this.num++;
console.info('num: ' + this.num.toString())
})
}
.width('100%')
.height('100%')
}
那如果我們把@State去掉的話，num這個變量也是會變的，也就是說在控制臺還是依舊會輸出num的值，但Text文本就不會實時將num這個變量顯示出來。
@Prop
@Prop具有與@State相同的語義，但初始化方式不同。@Prop裝飾的變量必須使用其父組件提供的@State變量進行初始化，允許組件內部修改@Prop變量，但上述更改不會通知給父組件，即@Prop屬于單向數(shù)據(jù)綁定。也就是說@State修飾的變量發(fā)生改變是會引起被@Prop修飾的變量也發(fā)生改變，但反之則不會。
僅支持簡單類型：number、string、boolean
在創(chuàng)建組件的新實例時，必須初始化所有@Prop變量，不支持在組件內部進行初始化。
用下面這個簡單的demo來理解會快一點。點擊A按鈕numA會加一，同時numA加一也會引起numB加一。但點擊B按鈕，numB加一，這就不會引起numA加一了。
@Entry
@Component
struct Page_prop {
@State numA:number = 0
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Row(){
Button('numA add one')
.padding({right:20})
.onClick(()=>{
this.numA++;
})
Text('numA: ' + this.numA)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
numB_prop({numB: this.numA})
}
.width('100%')
.height('100%')
}
}
@Component
struct numB_prop{
@Prop numB: number
build(){
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
Button('numB add one')
.padding({right:20})
.onClick(()=>{
this.numB++;
})
Text('numB: ' + this.numB)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
}
}
@Link
那有@Prop這個單向數(shù)據(jù)綁定的話，也就自然會有@Link這個雙向數(shù)據(jù)綁定了。
@Link支持的數(shù)據(jù)類型和@State是一樣的，都是支持class、number、boolean、string，以及這些類型的數(shù)組。但是@Link與前兩者不同的是可以使用@Link變量或@State變量的引用進行初始化。@State變量可以通過’$'操作符創(chuàng)建引用。
@Entry
@Component
struct Page_link {
@State numA:number = 0
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Row(){
Button('numA add one')
.padding({right:20})
.onClick(()=>{
this.numA++;
})
Text('numA: ' + this.numA)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
numB_link({numB: $numA})
}
.width('100%')
.height('100%')
}
}
@Component
struct numB_link{
@Link numB: number
build(){
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
Button('numB add one')
.padding({right:20})
.onClick(()=>{
this.numB++;
})
Text('numB: ' + this.numB)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
}
}
通過上面三個例子的學習，相信你也已經(jīng)理解管理組件擁有的狀態(tài)了吧。
??https://harmonyos.51cto.com??
