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