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

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

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

二、@State的基本原理

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

1.?依賴關系的收集

當組件渲染時，ArkUI框架會追蹤所有被?@State?修飾的變量在 UI組件 中的使用情況。
通過裝飾器在變量的 getter 中注入依賴收集邏輯，記錄當前組件對該狀態的依賴關系。觀察者的模式來進行數據變化的監控。
例如，當組件的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.?數據變更通知

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

響應式系統的核心流程

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

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

三、使用@State的注意事項

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

1. 必須初始化：
@State?變量必須在組件構造函數中初始化，否則會導致編譯錯誤。

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

2. 通過?this?賦值：
必須通過?this.xxx = value?修改狀態，直接賦值（如?xxx = value）不會觸發 UI 更新。

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

3. 避免頻繁更新：
連續多次修改狀態會導致多次重繪，可通過合并操作優化。

注意：

1. 將獨立變化的狀態拆分為多個?@State?變量，避免不必要的組件刷新。
2. 深層嵌套的對象或數組可能導致性能下降，建議使用扁平結構。
3. 組件銷毀時，@State?變量會自動釋放，但需注意手動清理定時器等外部資源。