鴻蒙中@State的原理使用詳解(HarmonyOS 5)

更新時間：2025年04月11日 10:30:43 作者：GeorgeGcs

@State是 HarmonyOS ArkTS 框架中用于管理組件狀態(tài)的核心裝飾器,其核心作用是實現(xiàn)數(shù)據(jù)驅動 UI 的響應式編程模式,本文給大家介紹鴻蒙中@State的原理詳解,感興趣的朋友一起看看吧

一、@State在鴻蒙中是做什么的？

@State 是 HarmonyOS ArkTS 框架中用于管理組件狀態(tài)的核心裝飾器，其核心作用是實現(xiàn)數(shù)據(jù)驅動 UI 的響應式編程模式。通過將變量標記為 @State，開發(fā)者可以確保當狀態(tài)值發(fā)生變化時，依賴該狀態(tài)的 UI 組件會自動重新渲染，從而保持數(shù)據(jù)與界面的實時同步。

@State 是 HarmonyOS ArkTS 實現(xiàn)響應式編程的大基礎核心，可以說整個V1和V2都是圍繞它來進行組合使用。

二、@State的基本原理

@State 的響應式機制基于 依賴收集 和 變更通知 兩大核心流程，結合 TypeScript 裝飾器和元編程技術實現(xiàn)。其核心原理是通過依賴收集和變更通知機制，確保狀態(tài)變化自動同步到 UI。

1. 依賴關系的收集

當組件渲染時，ArkUI框架會追蹤所有被 @State 修飾的變量在 UI組件中的使用情況。
通過裝飾器在變量的 getter 中注入依賴收集邏輯，記錄當前組件對該狀態(tài)的依賴關系。觀察者的模式來進行數(shù)據(jù)變化的監(jiān)控。
例如，當組件的Text中使用 this.message，框架會將該組件注冊為 message 的依賴者。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

2. 數(shù)據(jù)變更通知

當 @State 變量通過 this.message = xxxxxx 被修改時，框架會檢測到值的變化。
使用 Proxy 或 Object.defineProperty 攔截屬性的賦值操作，觸發(fā)變更通知。
框架遍歷所有依賴該狀態(tài)的組件，并調用其更新方法重新渲染 UI。
采用 臟檢查優(yōu)化 和 異步渲染隊列，合并多次更新操作，避免頻繁重繪

響應式系統(tǒng)的核心流程

數(shù)據(jù)變化 → 依賴追蹤 → 自動重渲染（60FPS 高幀率更新）

（1）數(shù)據(jù)變化：開發(fā)者通過 this.xxx = value 修改狀態(tài)。
（2）依賴追蹤：ArkUI框架根據(jù)之前收集的依賴關系，確定哪些組件需要更新。（哪個UI組件用了@State修飾的變量。）
（3）自動重渲染：僅重新渲染依賴該狀態(tài)的組件，提升性能。（最小限度的刷新UI）

三、使用@State的注意事項

在使用 @State 時，需注意以下關鍵點以避免潛在問題：

1. 必須初始化：

@State 變量必須在組件構造函數(shù)中初始化，否則會導致編譯錯誤。

 @Component
 struct MyComponent {
   @State count: number = 0; // 正確初始化
   // @State message: string; // 錯誤：未初始化
 }

2. 通過 this 賦值：

必須通過 this.xxx = value 修改狀態(tài)，直接賦值（如 xxx = value）不會觸發(fā) UI 更新。

 onClick() {
   this.count = 1; // 正確，觸發(fā) UI 更新
   this.obj = { ...this.obj, key: 'new' }; // 正確，整體賦值
   this.obj.key = 'new'; // 錯誤，直接修改屬性不觸發(fā)更新
 }