OpenHarmony頁面級(jí)變量的狀態(tài)管理

狀態(tài)管理

@State、@Prop、@Link、@Provide、Consume、@ObjectLink、@Observed和@Watch用于管理頁面級(jí)變量的狀態(tài)。

@State

@State裝飾的變量是組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時(shí)，將會(huì)調(diào)用所在組件的build方法進(jìn)行UI刷新。

@State狀態(tài)數(shù)據(jù)具有以下特征：

支持多種類型數(shù)據(jù)：支持class、number、boolean、string強(qiáng)類型數(shù)據(jù)的值類型和引用類型，以及這些強(qiáng)類型構(gòu)成的數(shù)組，即Array、Array、Array、Array。不支持object和any。

支持多實(shí)例：組件不同實(shí)例的內(nèi)部狀態(tài)數(shù)據(jù)獨(dú)立。

內(nèi)部私有：標(biāo)記為@State的屬性是私有變量，只能在組件內(nèi)訪問。

需要本地初始化：必須為所有@State變量分配初始值，變量未初始化可能導(dǎo)致未定義的框架異常行為。

創(chuàng)建自定義組件時(shí)支持通過狀態(tài)變量名設(shè)置初始值：在創(chuàng)建組件實(shí)例時(shí)，可以通過變量名顯式指定@State狀態(tài)變量的初始值。

@Prop

@Prop與@State有相同的語義，但初始化方式不同。@Prop裝飾的變量必須使用其父組件提供的@State變量進(jìn)行初始化，允許組件內(nèi)部修改@Prop變量，但變量的更改不會(huì)通知給父組件，即@Prop屬于單向數(shù)據(jù)綁定。

@Prop狀態(tài)數(shù)據(jù)具有以下特征：

支持簡單類型：僅支持number、string、boolean等簡單數(shù)據(jù)類型；

私有：僅支持組件內(nèi)訪問；

支持多個(gè)實(shí)例：一個(gè)組件中可以定義多個(gè)標(biāo)有@Prop的屬性；

創(chuàng)建自定義組件時(shí)將值傳遞給@Prop變量進(jìn)行初始化：在創(chuàng)建組件的新實(shí)例時(shí)，必須初始化所有@Prop變量，不支持在組件內(nèi)部進(jìn)行初始化

@Link

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

支持多種類型：@Link支持的數(shù)據(jù)類型與@State相同，即class、number、string、boolean或這些類型的數(shù)組；

私有：僅支持組件內(nèi)訪問；

單個(gè)數(shù)據(jù)源：父組件中用于初始化子組件@Link變量的必須是@State變量；

雙向通信：子組件對(duì)@Link變量的更改將同步修改父組件中的@State變量；

創(chuàng)建自定義組件時(shí)需要將變量的引用傳遞給@Link變量，在創(chuàng)建組件的新實(shí)例時(shí)，必須使用命名參數(shù)初始化所有@Link變量。@Link變量可以使用@State變量或@Link變量的引用進(jìn)行初始化，@State變量可以通過'$'操作符創(chuàng)建引用。

@Observed和ObjectLink數(shù)據(jù)管理

開發(fā)者只想針對(duì)父組件中某個(gè)數(shù)據(jù)對(duì)象的部分信息進(jìn)行同步時(shí)，如果這些部分信息是一個(gè)類對(duì)象，就可以使用@ObjectLink配合@Observed來實(shí)現(xiàn)，如下圖所示。

@Observed用于類，@ObjectLink用于變量。

@ObjectLink裝飾的變量類型必須為類（class type）。

類要被@Observed裝飾器所裝飾。

不支持簡單類型參數(shù)，可以使用@Prop進(jìn)行單向同步。

@ObjectLink裝飾的變量是不可變的。

屬性的改動(dòng)是被允許的，當(dāng)改動(dòng)發(fā)生時(shí)，如果同一個(gè)對(duì)象被多個(gè)@ObjectLink變量所引用，那么所有擁有這些變量的自定義組件都會(huì)被通知進(jìn)行重新渲染。

@ObjectLink裝飾的變量不可設(shè)置默認(rèn)值。

必須讓父組件中有一個(gè)由@State、@Link、@StorageLink、@Provide或@Consume裝飾的變量所參與的TS表達(dá)式進(jìn)行初始化。

@ObjectLink裝飾的變量是私有變量，只能在組件內(nèi)訪問

@Consume和@Provide

@Provide作為數(shù)據(jù)的提供方，可以更新其子孫節(jié)點(diǎn)的數(shù)據(jù)，并觸發(fā)頁面渲染。@Consume在感知到@Provide數(shù)據(jù)的更新后，會(huì)觸發(fā)當(dāng)前自定義組件的重新渲染。

@Provide

@Consume

@Watch

@Watch用于監(jiān)聽狀態(tài)變量的變化

具體允許哪種方式取決于狀態(tài)變量的裝飾器：

從上表中可以看出：

@State變量需要本地初始化，初始化的值可以被構(gòu)造參數(shù)覆蓋。

@Prop和@Link變量必須且僅通過構(gòu)造函數(shù)參數(shù)進(jìn)行初始化。

通過構(gòu)造函數(shù)方法初始化成員變量，需要遵循如下規(guī)則：

從上表中可以看出：

父組件的常規(guī)變量可以用于初始化子組件的@State變量，但不能用于初始化@Link或@Prop變量。

父組件的@State變量可以初始化子組件的@Prop、@Link（通過$）或常規(guī)變量，但不能初始化子組件的@State變量。

父組件的@Link變量可以初始化子組件的@Link或常規(guī)變量。但是初始化子組件的@State成員是語法錯(cuò)誤，此外不建議初始化@Prop。

父組件的@Prop變量可以初始化子組件的常規(guī)變量或@Prop變量，但不能初始化子組件的@State或@Link變量。

@StorageLink和@StorageProp不允許由父組件中傳遞到子組件。

除了上述規(guī)則外，還需要遵循TS的強(qiáng)類型規(guī)則。

審核編輯：湯梓紅