鴻蒙前端開發4-ArkTS語言狀態管理

月下云生發表於2024-06-12

1.執行時狀態變化帶來的UI的重新渲染,在ArkTS統稱為狀態管理機制

2.狀態變數:被狀態裝飾器裝飾的變數,狀態變數值的改變會引起UI的渲染更新。狀態state和ui/view的關係

  

  View(ui):UI渲染指build方法內的UI描述和@Build裝飾器的方法內的UI描述對映到介面

  State:狀態,指驅動UI更新的資料。使用者透過觸發事件方法,改變狀態資料。狀態資料改變,引起UI的重新渲染

3.常規變數:沒有被狀態裝飾器裝飾的變數,通常應用於輔助計算。它的改變永遠不會引起UI的重新整理

4.資料來源/同步源:狀態變數的原始來源,可以同步給不同的狀態資料。通常意義為父元件傳給子元件的資料

5.命名引數機制:父元件透過指定引數傳遞給子元件的狀態變數,為父子傳遞同步引數的主要手段

6.從父元件初始化:父元件使用命名引數機制,將指定引數傳遞給子元件。子元件初始化的預設值在有父元件傳值的情況下,會被覆蓋

7.初始化子節點:父元件中狀態變數可以傳遞給子元件,初始化子元件對應的狀態變數

8.本地初始化:在變數宣告的時候賦值,作為變數的預設值

9.裝飾器

  

  上圖中,Components部分的裝飾器為元件級別的狀態管理,Application部分為應用的狀態管理。開發者可以透過@StorageLink/@LocalStorageLink實現應用和元件狀態的雙向同步,透過@StorageProp/@LocalStorageProp實現應用和元件狀態的單向同步

  a.元件級別的狀態管理

    @State:@State裝飾的變數擁有其所屬元件的狀態,可作為其子元件單向和雙向的資料來源,當其數值改變時,會引起相關元件的渲染重新整理

      

    @Preop:@Prop裝飾器的變數可以和父元件建立起單向資料同步,@Prop裝飾的變數是可變的,但修改不會同步回父元件

    @Link:@Link裝飾的變數和父元件構建雙向同步關係的狀態變數,父元件接受來自@Link裝飾的變數的修改同步,父元件更新也會同步給@Link裝飾的變數

    @Provide/@Consume:@Provide/@Consume裝飾的變數用於跨元件層級(多層級)同步狀態變數,可以不需要透過引數命名機制傳遞,透過alias別名或者屬性繫結

    @Observed:@Observed裝飾class,需要觀察多層巢狀場景的class需要被@Observed裝飾,單獨使用@Observed沒有任何作用,需要和@ObjectLink和@Prop連用

    @ObjectLink:@ObjectLink裝飾的變數接收@Observed裝飾的class例項,應用於觀察多層巢狀場景,和父元件的資料來源構成雙向資料同步

  b.應用級別狀態管理

    AppStorage是應用程式中的一個特殊的單例LocalStorage物件,是應用級的資料庫,和程序繫結,透過@StorageProp和@StorageLink裝飾器可以和元件聯動

    AppStorage是應用狀態的“中樞”,將需要與元件(UI)互動的資料存入AppStorage,比如持久化資料PersistentStorage和環境變數Environment。UI再透過AppStorage提供的裝飾器或者API介面,訪問這些資料

    框架還提供了LocalStorage,AppStorage是LocalStorage特殊的單例。LocalStorage是應用程式宣告的應用狀態的記憶體“資料庫”,通常用於頁面級的狀態共享,透過@LocalStorageProp和@LocalStorageLink裝飾器可以和UI聯動

   c.其他狀態管理

    @Watch用於監聽狀態變數的變化。

    $$運算子:給內建元件提供TS變數的引用,使得TS變數和內建元件的內部狀態保持同步

相關文章