狀態管理
@State、@Prop、@Link、@Provide、Consume、@ObjectLink、@Observed和@Watch用于管理頁面級變量的狀態。
裝飾器 | 裝飾內容 | 說明 |
---|---|---|
@State | 基本數據類型,類,數組 | 修飾的狀態數據被修改時會觸發組件的build方法進行UI界面更新。 |
@Prop | 基本數據類型 | 修改后的狀態數據用于在父組件和子組件之間建立單向數據依賴關系。修改父組件關聯數據時,當前組件會重新渲染。 |
@Link | 基本數據類型,類,數組 | 父子組件之間的雙向數據綁定,父組件的內部狀態數據作為數據源,任何一方所做的修改都會反映給另一方。 |
@Observed | 類 | @Observed應用于類,表示該類中的數據變更被UI頁面管理。 |
@ObjectLink | 被@Observed所裝飾類的對象 | @ObjectLink裝飾的狀態數據被修改時,在父組件或者其他兄弟組件內與它關聯的狀態數據所在的組件都會重新渲染。 |
@Consume | 基本數據類型,類,數組 | @Consume裝飾的變量在感知到@Provide裝飾的變量更新后,會觸發當前自定義組件的重新渲染。 |
@Provide | 基本數據類型,類,數組 | @Provide作為數據的提供方,可以更新其子孫節點的數據,并觸發頁面重新渲染。 |
@State
@State裝飾的變量是組件內部的狀態數據,當這些狀態數據被修改時,將會調用所在組件的build方法進行UI刷新。
@State狀態數據具有以下特征:
支持多種類型數據:支持class、number、boolean、string強類型數據的值類型和引用類型,以及這些強類型構成的數組,即Array、Array、Array、Array。不支持object和any。
支持多實例:組件不同實例的內部狀態數據獨立。
內部私有:標記為@State的屬性是私有變量,只能在組件內訪問。
需要本地初始化:必須為所有@State變量分配初始值,變量未初始化可能導致未定義的框架異常行為。
創建自定義組件時支持通過狀態變量名設置初始值:在創建組件實例時,可以通過變量名顯式指定@State狀態變量的初始值。
@Prop
@Prop與@State有相同的語義,但初始化方式不同。@Prop裝飾的變量必須使用其父組件提供的@State變量進行初始化,允許組件內部修改@Prop變量,但變量的更改不會通知給父組件,即@Prop屬于單向數據綁定。
@Prop狀態數據具有以下特征:
支持簡單類型:僅支持number、string、boolean等簡單數據類型;
私有:僅支持組件內訪問;
支持多個實例:一個組件中可以定義多個標有@Prop的屬性;
創建自定義組件時將值傳遞給@Prop變量進行初始化:在創建組件的新實例時,必須初始化所有@Prop變量,不支持在組件內部進行初始化
@Link
@Link裝飾的變量可以和父組件的@State變量建立雙向數據綁定:
支持多種類型:@Link支持的數據類型與@State相同,即class、number、string、boolean或這些類型的數組;
私有:僅支持組件內訪問;
單個數據源:父組件中用于初始化子組件@Link變量的必須是@State變量;
雙向通信:子組件對@Link變量的更改將同步修改父組件中的@State變量;
創建自定義組件時需要將變量的引用傳遞給@Link變量,在創建組件的新實例時,必須使用命名參數初始化所有@Link變量。@Link變量可以使用@State變量或@Link變量的引用進行初始化,@State變量可以通過'$'操作符創建引用。
@Observed和ObjectLink數據管理
開發者只想針對父組件中某個數據對象的部分信息進行同步時,如果這些部分信息是一個類對象,就可以使用@ObjectLink配合@Observed來實現,如下圖所示。
@Observed用于類,@ObjectLink用于變量。
@ObjectLink裝飾的變量類型必須為類(class type)。
類要被@Observed裝飾器所裝飾。
不支持簡單類型參數,可以使用@Prop進行單向同步。
@ObjectLink裝飾的變量是不可變的。
屬性的改動是被允許的,當改動發生時,如果同一個對象被多個@ObjectLink變量所引用,那么所有擁有這些變量的自定義組件都會被通知進行重新渲染。
@ObjectLink裝飾的變量不可設置默認值。
必須讓父組件中有一個由@State、@Link、@StorageLink、@Provide或@Consume裝飾的變量所參與的TS表達式進行初始化。
@ObjectLink裝飾的變量是私有變量,只能在組件內訪問
@Consume和@Provide
@Provide作為數據的提供方,可以更新其子孫節點的數據,并觸發頁面渲染。@Consume在感知到@Provide數據的更新后,會觸發當前自定義組件的重新渲染。
@Provide
名稱 | 說明 |
---|---|
裝飾器參數 | 是一個string類型的常量,用于給裝飾的變量起別名。如果規定別名,則提供對應別名的數據更新。如果沒有,則使用變量名作為別名。推薦使用@Provide('alias')這種形式。 |
同步機制 | @Provide的變量類似@State,可以修改對應變量進行頁面重新渲染。也可以修改@Consume裝飾的變量,反向修改@State變量。 |
初始值 | 必須設置初始值。 |
頁面重渲染場景 | 觸發頁面渲染的修改:- 基礎類型(boolean,string,number)變量的改變;- @Observed class類型變量及其屬性的修改;- 添加,刪除,更新數組中的元素。 |
@Consume
類型 | 說明 |
---|---|
初始值 | 不可設置默認初始值。 |
@Watch
@Watch用于監聽狀態變量的變化
具體允許哪種方式取決于狀態變量的裝飾器:
裝飾器類型 | 本地初始化 | 通過構造函數參數初始化 |
---|---|---|
@State | 必須 | 可選 |
@Prop | 禁止 | 必須 |
@Link | 禁止 | 必須 |
@StorageLink | 必須 | 禁止 |
@StorageProp | 必須 | 禁止 |
@Provide | 必須 | 可選 |
@Consume | 禁止 | 禁止 |
@ObjectLink | 禁止 | 必須 |
常規成員變量 | 推薦 | 可選 |
從上表中可以看出:
@State變量需要本地初始化,初始化的值可以被構造參數覆蓋。
@Prop和@Link變量必須且僅通過構造函數參數進行初始化。
通過構造函數方法初始化成員變量,需要遵循如下規則:
從父組件中的變量(下)到子組件中的變量(右) | @State | @Link | @Prop | 常規變量 |
---|---|---|---|---|
@State | 不允許 | 允許 | 允許 | 允許 |
@Link | 不允許 | 允許 | 不推薦 | 允許 |
@Prop | 不允許 | 不允許 | 允許 | 允許 |
@StorageLink | 不允許 | 允許 | 不允許 | 允許 |
@StorageProp | 不允許 | 不允許 | 不允許 | 允許 |
常規變量 | 允許 | 不允許 | 不允許 | 允許 |
從上表中可以看出:
父組件的常規變量可以用于初始化子組件的@State變量,但不能用于初始化@Link或@Prop變量。
父組件的@State變量可以初始化子組件的@Prop、@Link(通過$)或常規變量,但不能初始化子組件的@State變量。
父組件的@Link變量可以初始化子組件的@Link或常規變量。但是初始化子組件的@State成員是語法錯誤,此外不建議初始化@Prop。
父組件的@Prop變量可以初始化子組件的常規變量或@Prop變量,但不能初始化子組件的@State或@Link變量。
@StorageLink和@StorageProp不允許由父組件中傳遞到子組件。
除了上述規則外,還需要遵循TS的強類型規則。
審核編輯:湯梓紅
-
變量
+關注
關注
0文章
613瀏覽量
28361 -
OpenHarmony
+關注
關注
25文章
3716瀏覽量
16271
發布評論請先 登錄
相關推薦
評論