@State 組件內狀態(tài)
- @State裝飾的變量,會和自定義組件的渲染綁定起來。當狀態(tài)改變時,UI會發(fā)生對應的渲染改變。
- 在狀態(tài)變量相關裝飾器中,@State是最基礎的,使變量擁有狀態(tài)屬性的裝飾器,它也是大部分狀態(tài)變量的數(shù)據源。
裝飾器使用規(guī)則
- 同步類型:不與父組件中任何類型的變量同步。
- 允許裝飾的變量類型:Object、class、string、number、boolean、enum類型,以及這些類型的數(shù)組,且類型必須被指定。
- 被裝飾變量的初始值:必須本地初始化。
變量的傳遞/訪問規(guī)則
- 從父組件初始化:可選,從父組件初始化或者本地初始化。如果從父組件初始化將會覆蓋本地初始化。但實際上編輯器并不希望你這樣做,代碼不會報錯但是會劃紅線提示。
- 用于初始化子組件:@State裝飾的變量支持初始化子組件的常規(guī)變量、@State、@Link、@Prop、@Provide。
- 是否支持組件外訪問:不支持,只能在組件內訪問。
觀察變化和行為表現(xiàn)
- 并不是狀態(tài)變量的所有更改都會引起UI的刷新,只有可以被框架觀察到的修改才會引起UI刷新。
- 當裝飾的數(shù)據類型為boolean、string、number類型時,可以觀察到數(shù)值的變化。
- 當裝飾的數(shù)據類型為class或者Object時,可以觀察到自身的賦值的變化,和其屬性賦值的變化。
- 當裝飾的對象是array時,可以觀察到數(shù)組本身的賦值和添加、刪除、更新數(shù)組的變化。
@Props 父組件傳入的狀態(tài) - 單向同步
- @Prop變量允許在本地修改,但修改后的變化不會同步回父組件。
- 當父組件中的數(shù)據源更改時,與之相關的@Prop裝飾的變量都會自動更新。
- 如果子組件已在本地修改了@Prop變量,而在父組件中對應的@State變量被修改后,子組件本地修改的@Prop變量值將被覆蓋。
- @Prop裝飾器不能在@Entry裝飾的自定義組件中使用。
裝飾器使用規(guī)則
- 同步類型:單向同步。
- 允許裝飾的變量類型:string、number、boolean、enum類型。不支持any,必須指定類型。
- 被裝飾變量的初始值:允許本地初始化。
變量的傳遞/訪問規(guī)則
- 從父組件初始化:如果本地有初始化,則是可選的(但這種方式編輯器會報etslint錯誤)。沒有的話,則必選
- 用于初始化子組件:@Prop支持去初始化子組件中的常規(guī)變量、@State、@Link、@Prop、@Provide。
- 是否支持組件外訪問:不支持,只能在組件內訪問。
思考:如何單向綁定非簡單類型數(shù)據?
@Link 父子組件共用的狀態(tài) - 雙向同步
- 子組件中被@Link裝飾的變量與其父組件中對應的數(shù)據源建立雙向數(shù)據綁定。
- @Link裝飾器不能在@Entry裝飾的自定義組件中使用。
裝飾器使用規(guī)則
- 同步類型:雙向同步。
- 允許裝飾的變量類型:Object、class、string、number、boolean、enum類型,以及這些類型的數(shù)組。類型必須被指定,且和雙向綁定狀態(tài)變量的類型相同。
- 被裝飾變量的初始值:禁止本地初始化。
變量的傳遞/訪問規(guī)則
- 從父組件初始化和更新:必選
- 用于初始化子組件:允許,可用于初始化常規(guī)變量、@State、@Link、@Prop、@Provide。
- 是否支持組件外訪問:私有,只能在所屬組件內訪問。
@Provide 與 @Consume 跨組件雙向通信
- @Provide裝飾的狀態(tài)變量自動對其所有后代組件可用,即該變量被“provide”給他的后代組件。由此可見,@Provide的方便之處在于,開發(fā)者不需要多次在組件之間傳遞變量。
- 后代通過使用@Consume去獲取@Provide提供的變量,建立在@Provide和@Consume之間的雙向數(shù)據同步,與@State/@Link不同的是,前者可以在多層級的父子組件之間傳遞。
- @Provide和@Consume可以通過相同的變量名或者相同的變量別名綁定,變量類型必須相同。
// 通過相同的變量名綁定
@Provide a: number = 0;
@Consume a: number;
// 通過相同的變量別名綁定
@Provide('a') b: number = 0;
@Consume('a') c: number;
裝飾器說明
- @State的規(guī)則同樣適用于@Provide,差異為@Provide還作為多層后代的同步源。
- @Link的規(guī)則同樣適用于@Consume,差異為@Consume可在多層父代的找到同步源。
變量的傳遞/訪問規(guī)則
@Observed裝飾器和@ObjectLink裝飾器:嵌套類對象屬性變化
-
@ObjectLink和@Observed類裝飾器用于在涉及嵌套對象或數(shù)組的場景中進行雙向數(shù)據同步
-
被@Observed裝飾的類,可以被觀察到屬性的變化
-
子組件中@ObjectLink裝飾器裝飾的狀態(tài)變量用于接收@Observed裝飾的類的實例,和父組件中對應的狀態(tài)變量建立雙向數(shù)據綁定。
-
單獨使用@Observed是沒有任何作用的,需要搭配@ObjectLink或者@Prop使用。文章來源:http://www.zghlxwxcb.cn/news/detail-809413.html
-
具體用法看Demo5、Demo6文章來源地址http://www.zghlxwxcb.cn/news/detail-809413.html
AppStorage:應用全局的UI狀態(tài)存儲
- AppStorage是在應用啟動的時候會被創(chuàng)建的單例。它提供應用狀態(tài)數(shù)據的中心存儲。
- 這些狀態(tài)數(shù)據在應用級別都是可訪問的,屬性通過唯一的鍵字符串值訪問。
- AppStorage中的屬性可以被雙向同步
@StorageLink-雙向同步
@StorageProp-單向同步
PersistentStorage:持久化存儲UI狀態(tài)
- PersistentStorage的作用是持久化存儲選定的AppStorage屬性,以確保這些屬性在應用程序重新啟動時的值與應用程序關閉時的值相同。
@Watch裝飾器:狀態(tài)變量更改通知
- @Watch用于監(jiān)聽狀態(tài)變量的變化,當狀態(tài)變量變化時,@Watch的回調方法將被調用。
- @Watch在ArkUI框架內部判斷數(shù)值有無更新使用的是嚴格相等(===)
- 對象類型的屬性修改,以及數(shù)組類型的修改,均會觸發(fā)@Watch
到了這里,關于鴻蒙開發(fā)之狀態(tài)管理的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!