《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件知識點2-8-2 頁面級變量的狀態(tài)管理

頁面級變量的狀態(tài)管理頁面級變量的狀態(tài)管理裝飾器裝飾內(nèi)容說明@State基本數(shù)據(jù)類型，類，數(shù)組修飾的狀態(tài)數(shù)據(jù)被修改時會執(zhí)行自定義組件build方法中的部分UI描述（使用該狀態(tài)變量的UI組件）來進行UI界面更新。@Prop基本數(shù)據(jù)類型修改后的狀態(tài)數(shù)據(jù)用于在父組件和子組件之間建立單向數(shù)據(jù)依賴關(guān)系。修改父組件關(guān)聯(lián)數(shù)據(jù)時，當(dāng)前組件會重新渲染。@Link基本數(shù)據(jù)類型，類，數(shù)組父子組件之間的雙向數(shù)據(jù)綁定，父組件的內(nèi)部狀態(tài)數(shù)據(jù)作為數(shù)據(jù)源，任何一方所做的修改都會反映給另一方。@Observed類@Observed應(yīng)用于類，表示該類中的數(shù)據(jù)變更被UI頁面管理。@ObjectLink被@Observed所裝飾類的對象@ObjectLink裝飾的狀態(tài)數(shù)據(jù)被修改時，在父組件或者其他兄弟組件內(nèi)與它關(guān)聯(lián)的狀態(tài)數(shù)據(jù)所在的組件都會重新渲染。@Provide基本數(shù)據(jù)類型，類，數(shù)組@Provide作為數(shù)據(jù)的提供方，可以更新其子孫節(jié)點的數(shù)據(jù)，并觸發(fā)頁面重新渲染。@Consume基本數(shù)據(jù)類型，類，數(shù)組@Consume裝飾的變量在感知到@Provide裝飾的變量更新后，會觸發(fā)當(dāng)前自定義組件的重新渲染。@State@State裝飾的變量是組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時，將會調(diào)用所在組件的build方法中的部分UI描述（使用該狀態(tài)變量的UI組件相關(guān)描述）進行UI刷新。@State狀態(tài)數(shù)據(jù)具有以下特征：支持多種類型數(shù)據(jù)：支持class、number、boolean、string強類型數(shù)據(jù)的值類型和引用類型，以及這些強類型構(gòu)成的數(shù)組，即Array<class>、Array<string>、Array<boolean>、Array<number>。不支持any。支持多實例：組件不同實例的內(nèi)部狀態(tài)數(shù)據(jù)獨立。內(nèi)部私有：標記為@State的屬性是私有變量，只能在組件內(nèi)訪問。需要本地初始化：必須為所有@State變量分配初始值，變量未初始化可能導(dǎo)致未定義的框架異常行為。創(chuàng)建自定義組件時支持通過狀態(tài)變量名設(shè)置初始值：在創(chuàng)建組件實例時，可以通過變量名顯式指定@State狀態(tài)變量的初始值。@State@State使用示例1.定義一個MyComponent組件，使用@State裝飾count變量@Componentstruct

MyComponent

{

@State

count:

number

=

0

private

title:

string

=

''

private

increaseBy:

number

=

1

build()

{

Column()

{

Text(this.title).fontSize(20)

Button(`Click

to

increase

count=${this.count}`)

.margin(20)

.onClick(()

=>

{

//

修改內(nèi)部狀態(tài)變量count

this.count

+=

this.increaseBy

})

}

}}@State2.在頁面中創(chuàng)建兩個MyComponent組件實例，并初始化實例變量。完成后在預(yù)覽器中測試效果。@Entry@Componentstruct

EntryComponent

{

build()

{

Column()

{

MyComponent({

title:

'MyComponent1',

count:

0,

increaseBy:

1

})

//

第1個MyComponent實例

MyComponent({

title:

'MyComponent2',

count:

2,

increaseBy:

2

})

//

第2個MyComponent實例

}

}}@Prop@Prop與@State有相同的語義，但初始化方式不同。@Prop裝飾的變量必須使用其父組件提供的@State變量進行初始化，允許組件內(nèi)部修改@Prop變量，但變量的更改不會通知給父組件，父組件變量的更改會同步到@prop裝飾的變量，即@Prop屬于單向數(shù)據(jù)綁定。@Prop狀態(tài)數(shù)據(jù)具有以下特征：支持多種類型數(shù)據(jù)：支持number、boolean、string類型數(shù)據(jù)私有：僅支持組件內(nèi)訪問；支持多個實例：一個組件中可以定義多個標有@Prop的屬性；創(chuàng)建自定義組件時將按值傳遞方式給@Prop變量進行初始化：在創(chuàng)建組件的新實例時，必須初始化所有@Prop變量，不支持在組件內(nèi)部進行初始化。@Prop@Prop使用示例1.定義一個CountDownComponent組件，使用@Prop裝飾count變量@Componentstruct

CountDownComponent

{

@Prop

count:

number

private

costOfOneAttempt:

number

build()

{

Column()

{

if

(this.count

>

0)

{

Text(`You

have

${this.count}

Nuggets

left`).fontSize(18)

}

else

{

Text('Game

over!').fontSize(18)

}

Button('count

-

costOfOneAttempt')

.margin(15)

.onClick(()

=>

{

this.count

-=

this.costOfOneAttempt

})

}

}}@Prop2.在頁面中創(chuàng)建MyComponent組件實例,如下所示。完成后在預(yù)覽器中測試效果。@Entry@Componentstruct

ParentComponent

{

@State

countDownStartValue:

number

=

10

//

初始化countDownStartValue

build()

{

Column()

{

Text(`Grant

${this.countDownStartValue}

nuggets

to

play.`).fontSize(18)

Button('+1

-

Nuggets

in

New

Game')

.margin(15)

.onClick(()

=>

{

this.countDownStartValue

+=

1

})

Button('-1

-

Nuggets

in

New

Game')

.margin(15)

.onClick(()

=>

{

this.countDownStartValue

-=

1

})

//

創(chuàng)建子組件時，必須在構(gòu)造函數(shù)參數(shù)中提供其@Prop變量count的初始值，同時初始化常規(guī)變量costOfOneAttempt（非Prop變量）

CountDownComponent({

count:

this.countDownStartValue,

costOfOneAttempt:

2

})

}

}}@Link@Link裝飾的變量可以和父組件的@State變量建立雙向數(shù)據(jù)綁定：@Link狀態(tài)數(shù)據(jù)具有以下特征：支持多種類型：@Link支持的數(shù)據(jù)類型與@State相同，即class、number、string、boolean或這些類型的數(shù)組；私有：僅支持組件內(nèi)訪問；單個數(shù)據(jù)源：父組件中用于初始化子組件@Link變量的必須是父組件定義的狀態(tài)變量；雙向通信：子組件對@Link變量的更改將同步修改父組件中的@State變量；創(chuàng)建自定義組件時需要將變量的引用傳遞給@Link變量，在創(chuàng)建組件的新實例時，必須使用命名參數(shù)初始化所有@Link變量。@Link變量可以使用@State變量或@Link變量的引用進行初始化，@State變量可以通過'$'操作符創(chuàng)建引用。@Link@Link使用示例1.定義一個PlayButton組件，使用@Link裝飾PlayButton變量@Componentstruct

PlayButton

{

@Link

buttonPlaying:

boolean

build()

{

Column()

{

Button(this.buttonPlaying

?

'pause'

:

'play')

.margin(20)

.onClick(()

=>

{

this.buttonPlaying

=

!this.buttonPlaying

})

}

}}@Link2.在頁面中創(chuàng)建PlayButton組件實例,如下所示。完成后在預(yù)覽器中測試效果。@Entry@Componentstruct

Player

{

@State

isPlaying:

boolean

=

false

build()

{

Column()

{

PlayButton({

buttonPlaying:

$isPlaying

})

Text(`Player

is

${this.isPlaying

?

''

:

'not'}

playing`).fontSize(18)

Button('Parent:'

+

this.isPlaying)

.margin(15)

.onClick(()

=>

{

this.isPlaying

=

!this.isPlaying

})

}

}}@Link、@State和@Prop結(jié)合使用示例1.定義一個ChildA組件，使用@Prop裝飾counterVal變量@Componentstruct

ChildA

{

@Prop

counterVal:

number

build()

{

Button(`ChildA:

(${this.counterVal})

+

1`)

.margin(15)

.onClick(()

=>

{

this.counterVal

+=

1

})

}}@Link、@State和@Prop結(jié)合使用示例2.定義一個ChildB組件，使用@Link裝飾counterRef變量@Componentstruct

ChildB

{

@Link

counterRef:

number

build()

{

Button(`ChildB:

(${this.counterRef})

+

1`)

.margin(15)

.onClick(()

=>

{

this.counterRef

+=

1

})

}}@Link、@State和@Prop結(jié)合使用示例3.在頁面中創(chuàng)建ChildA與ChildB實例，如下所示。完成后在預(yù)覽器中測試效果。@Entry@Componentstruct

ParentView

{

@State

counter:

number

=

0

build()

{

Column()

{

ChildA({

counterVal:

this.counter

})

ChildB({

counterRef:

$counter

})

}

}}@Provide和@Consume@Provide作為數(shù)據(jù)的提供方，可以更新其子孫節(jié)點的數(shù)據(jù)，并觸發(fā)頁面渲染。@Consume在感知到@Provide數(shù)據(jù)的更新后，會觸發(fā)當(dāng)前自定義組件的重新渲染。@Provide：必須設(shè)置初始值@Consume：不可設(shè)置默認初始值。@Provide和@Consume@Provide配合@Consume使用示例1.創(chuàng)建孫組件CompC，在孫組件中使用@Consume裝飾變量reviewVotes@Componentstruct

CompC

{

@Consume("reviewVote")

reviewVotes:

number

build()

{

Column()

{

Button(`CompC:

${this.reviewVotes}`)

.margin(10)

.onClick(()

=>

{

this.reviewVotes

+=

1

})

}.width('100%')

}}@Provide和@Consume2.創(chuàng)建子組件CompB，在子組件中創(chuàng)建孫組件CompC對象@Componentstruct

CompB

{

build()

{

Column()

{

CompC()

}

}}@Provide和@Consume3.在頁面CompA中使用@Provide裝飾變量reviewVotes，并創(chuàng)建子組件CompB對象。完成后打開預(yù)覽器測試效果。@Entry@Componentstruct

CompA

{

@Provide("reviewVote")

reviewVotes:

number

=

0;

build()

{

Column()

{

CompB()

Button(`CompA:

${this.reviewVotes}`)

.margin(10)

.onClick(()

=>

{

this.reviewVotes

+=

1;

})

}

}}@Observed和ObjectLink數(shù)據(jù)管理@State配合@Link在父子組件實現(xiàn)對象全部信息同步@ObjectLink配合@Observed來實現(xiàn)對象部分信息同步@Observed和ObjectLink數(shù)據(jù)管理@Observed和ObjectLink設(shè)置要求：@Observed用于類，@ObjectLink用于變量。@ObjectLink裝飾的變量類型必須為類（classtype）。類要被@Observed裝飾器所裝飾。@ObjectLink裝飾的變量是不可變的。屬性的改動是被允許的，當(dāng)改動發(fā)生時，如果同一個對象被多個@ObjectLink變量所引用，那么所有擁有這些變量的自定義組件都會被通知進行重新渲染。@ObjectLink裝飾的變量不可設(shè)置默認值。必須讓父組件中有一個由@State、@Link、@StorageLink、@Provide或@Consume裝飾的變量所參與的TS表達式進行初始化。@ObjectLink裝飾的變量是私有變量，只能在組件內(nèi)訪問。@Observed和ObjectLink數(shù)據(jù)管理@Observed和ObjectLink使用示例：1.定義一個類ClassA，使用@Observed裝飾該類var

nextID:

number

=

0@Observedclass

ClassA

{

public

name:

string

public

c:

number

public

id:

number

constructor(c:

number,

name:

string

=

'OK')

{

this.name

=

name

this.c

=

c

this.id

=

nextID++

}}@Observed和ObjectLink數(shù)據(jù)管理2.定義一個子組件ViewA，使用@ObjectLink裝飾ClassA的對象@Componentstruct

ViewA

{

label:

string

=

'ViewA1'

@ObjectLink

a:

ClassA

build()

{

Row()

{

Button(`ViewA

[${this.label}]

this.a.c=

${this.a.c}

+1`)

.onClick(()

=>

{

this.a.c

+=

1

})

}.margin({

top:

10

})

}}@Observed和ObjectLink數(shù)據(jù)管理3.在頁面ViewB中，初始化元素類型為ClassA的數(shù)組，使用ForEach為數(shù)組的每個對象創(chuàng)建一個子組件ClassA。完成后打開預(yù)覽器測試效果。@Entry@Componentstruct

ViewB

{

@State

arrA:

ClassA[]

=

[new

ClassA(0),

new

ClassA(0)]

build()

{

Column()

{

ForEach(this.arrA,

(item)

=>

{

ViewA({

label:

`#${item.id}`,

a:

item

})

},

(item)

=>

item.id.toString())

...

}.width('100%')

}}@Watch@Watch用于監(jiān)聽狀態(tài)變量的變化，語法結(jié)構(gòu)為：@State

@Watch("onChanged")c