状态驱动机制

ArkUI 状态管理是鸿蒙的灵魂。理解状态驱动的全链路是掌握鸿蒙开发的核心。

---

1. 状态驱动的核心概念

数据变化 → 触发监听 → 标记脏节点 → 调度 UI 线程 → 重新执行 build → 刷新 UI

核心原则

• UI 是状态的函数：UI = f(state)，状态决定 UI
• 不可变性：通过创建新对象而非修改引用触发更新
• 单向数据流：数据 → UI（不是 UI → 数据）
• 局部刷新：只更新变化部分，不是整个页面重绘

---

2. 状态驱动全链路详解

2.1 第一环：数据变化

// @State 装饰的状态变量变化
@Component
struct Counter {
    @State count: number = 0

    increment() {
        this.count = this.count + 1  // ← 触发数据变化
    }
}

2.2 第二环：触发监听（Proxy 拦截）

@State 装饰的变量 → ArkUI 代理拦截 → 检测到变化
                                    ↓
                               创建变更记录

ArkUI 使用 Proxy 拦截状态变量的 getter/setter，当 set 被调用时：

1. 检测值是否变化（严格相等比较）
2. 记录变更的变量名和路径
3. 标记关联的 UI 节点为"脏节点"

2.3 第三环：标记脏节点

状态变量 → 关联组件 → 脏节点标记
  count     Counter    markDirty(Counter)

2.4 第四环：调度 UI 线程

脏节点队列
    ↓
批量收集（微任务/Microtask）
    ↓
统一调度到 UI 线程

2.5 第五环：重新执行 build → 刷新 UI

UI 线程收到调度
    ↓
对标记的组件执行 build()
    ↓
Diff 对比新旧 UI 树
    ↓
只更新变化的节点（局部刷新）
    ↓
GPU 渲染

---

3. 脏节点（Dirty Node）

3.1 什么是脏节点？

脏节点是被标记为"需要重新渲染"的 UI 组件节点。状态变化时，框架会递归地将关联的组件标记为脏节点。

3.2 脏节点的传播

状态变量 count 变化
    ↓
标记直接关联的节点（CountComponent）为脏
    ↓
递归标记父级节点为脏（直到根节点）
    ↓
重新执行脏节点的 build()

3.3 脏节点优化

// ✅ 精确的状态管理（只标记相关节点）
@State userName: string = '小明'
@State userAge: number = 25
// 修改 userName 只触发 userName 关联的 UI 更新

// ❌ 大范围状态管理（标记太多节点）
@State userData: { name: string; age: number } = { name: '小明', age: 25 }
// 修改 userData 触发整个页面重建

---

4. 状态检测机制

4.1 对象引用变化检测

// @State 通过 Proxy 检测对象引用变化
@Component
struct Index {
    @State user: { name: string; age: number } = { name: '小明', age: 25 }

    // ✅ 触发更新：创建新对象
    changeName() {
        this.user = { ...this.user, name: '小红' }
    }

    // ❌ 不触发更新：修改同一对象引用
    changeNameWrong() {
        this.user.name = '小红'  // ❌ @State 只检测引用变化
    }
}

4.2 数组变化检测

@Component
struct Index {
    @State items: string[] = ['a', 'b', 'c']

    // ✅ 触发更新：数组引用不变，但 @State 检测 push/pop 等操作
    addItem() {
        this.items.push('d')  // ✅ 触发更新
    }

    // ❌ 不触发更新：数组内部变化未被检测
    changeItem() {
        this.items[0] = 'x'  // ❌ 数组索引赋值不被检测
    }

    // ✅ 触发更新：通过不可变赋值
    replaceItem() {
        this.items = [...this.items]
        this.items[0] = 'x'
    }
}

⚠️ @State 只能检测数组的增删操作，不能检测数组内部元素的变化。嵌套对象的属性变化需要 @Observed + @ObjectLink。

---

5. 状态更新的生命周期

用户操作（点击/输入）
    ↓
修改 @State 变量
    ↓
Proxy 拦截 → 检测到变化
    ↓
标记脏节点
    ↓
批量收集（微任务）
    ↓
调度 UI 线程
    ↓
执行 build()（重新渲染）
    ↓
Diff 对比 → 更新 UI
    ↓
渲染完成

---

6. 状态管理的基本原则

6.1 单一数据源（Single Source of Truth）

// ✅ 正确：数据只有一个来源
@Component
struct UserProfile {
    @State user: User = { name: '小明', age: 25 }

    // 所有地方修改 user 都通过这一个 @State
    save() {
        this.user = { ...this.user, name: this.inputName }
    }
}

// ❌ 错误：数据分散在多处
@Component
struct UserProfile {
    @State userName: string = '小明'
    @State userAge: number = 25

    // 分散的状态难以维护
}

6.2 最小状态粒度

// ✅ 正确：状态最小化
@State isLoaded: boolean = false
@State isLoading: boolean = false

// ❌ 不必要：状态过大
@State allData: { items: any[]; page: number; total: number; isLoading: boolean; error: string } = {
    items: [], page: 0, total: 0, isLoading: false, error: ''
}

6.3 避免深层嵌套状态

// ❌ 不推荐：嵌套太深
@State data: {
    user: {
        profile: {
            settings: { theme: string }
        }
    }
}

// ✅ 推荐：扁平化
@State theme: string = 'light'

---

7. 常见状态管理问题

7.1 状态不更新

// ❌ 问题：嵌套对象属性变化不触发更新
@Component
struct Index {
    @State user: User = { name: '小明', address: { city: '北京' } }

    // ❌ 不触发更新
    changeCity() {
        this.user.address.city = '上海'
    }

    // ✅ 正确：使用 @Observed + @ObjectLink
    // 或者创建新对象
    changeCityCorrect() {
        this.user = {
            ...this.user,
            address: { ...this.user.address, city: '上海' }
        }
    }
}

7.2 状态更新不流畅

// ❌ 问题：大量状态同时变化
onClick() {
    this.name = '新名字'
    this.age = 30
    this.email = 'test@test.com'
    this.address = '地址'
    // 4 次独立的更新 → 4 次渲染
}

// ✅ 优化：批量状态变化
onClick() {
    this.userData = { ...this.userData, name: '新名字', age: 30, email: 'test@test.com' }
    // 1 次更新 → 1 次渲染
}

---

8. 面试高频考点

Q1: 状态驱动的全链路是什么？

回答：数据变化 → Proxy 拦截 → 标记脏节点 → 批量收集（微任务）→ 调度 UI 线程 → 重新执行 build → Diff 对比 → 更新 UI。

Q2: @State 能检测到什么变化？

回答：@State 通过 Proxy 检测引用变化。对数组只能检测增删（push/pop），不能检测索引赋值。嵌套对象属性变化需要用 @Observed + @ObjectLink。

Q3: 状态管理的三大原则？

回答：1. 单一数据源（Single Source of Truth）；2. 最小状态粒度；3. 避免深层嵌套状态。

---

🐱 小猫提示：状态驱动机制是鸿蒙面试最高频的核心考点。记住全链路 "数据变化→Proxy拦截→标记脏节点→调度UI线程→执行build→Diff更新"。面试能写出来就稳了！