狀態(tài)管理

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

@State

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

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

支持多種類型數(shù)據(jù)：支持class、number、boolean、string強類型數(shù)據(jù)的值類型和引用類型，以及這些強類型構(gòu)成的數(shù)組，即Array、Array、Array、Array。不支持object和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)變量的初始值。

@Prop

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

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

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

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

支持多個實例：一個組件中可以定義多個標有@Prop的屬性；

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

@Link

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@Consume和@Provide

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

@Provide

@Consume

@Watch

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

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

從上表中可以看出：

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

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

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

從上表中可以看出：

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

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

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

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

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

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

審核編輯：湯梓紅