ArkTS入门第四章：状态管理深度解析

前端技术

247人浏览 · 2026-04-13 10:56:26

前端技术 · 2026-04-13 10:56:26 发布

🔥 关键词：ArkTS状态管理、@State、@Prop、@Link、@Provide

前言

状态管理是应用开发的核心，ArkTS提供了多种状态装饰器来满足不同场景的需求。理解这些装饰器的工作原理和使用场景，是成为鸿蒙开发高手的关键一步。

本文将深度解析@State、@Prop、@Link等核心装饰器。

一、@State：组件内部状态

@State用于管理组件内部的私有状态，当状态变化时，UI会自动刷新：

@Entry
@Component
struct CounterPage {
  @State count: number = 0           // 定义状态变量
  @State message: string = 'Hello'   // 可以是任意类型

  build() {
    Column({ space: 20 }) {
      Text(`Count: ${this.count}`)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      
      Button('增加')
        .onClick(() => {
          this.count++               // 修改状态，UI自动更新
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

@State的特点

✅ 状态变化会触发UI重新渲染
✅ 只能在组件内部访问和修改
✅ 支持简单类型和对象类型

二、@Prop：父子组件单向同步

@Prop用于父组件向子组件传递数据，子组件可以读取但不能直接修改：

// 子组件
@Component
struct ChildComponent {
  @Prop title: string               // 接收父组件传入的值
  @Prop count: number

  build() {
    Column() {
      Text(this.title)
        .fontSize(20)
      Text(`Count: ${this.count}`)
        .fontSize(16)
      // 不能直接修改 this.count
    }
    .padding(20)
    .backgroundColor('#F1F5F9')
    .borderRadius(10)
  }
}

// 父组件
@Entry
@Component
struct ParentPage {
  @State parentCount: number = 10

  build() {
    Column({ space: 20 }) {
      ChildComponent({
        title: '子组件标题',
        count: this.parentCount    // 单向传递
      })
      
      Button('父组件修改')
        .onClick(() => {
          this.parentCount++       // 父组件修改，子组件同步更新
        })
    }
    .padding(20)
  }
}

三、@Link：父子组件双向同步

@Link实现父子组件之间的双向数据绑定：

// 子组件
@Component
struct EditComponent {
  @Link value: string               // 双向绑定

  build() {
    TextInput({ text: this.value })
      .width('80%')
      .height(50)
      .onChange((newValue) => {
        this.value = newValue        // 子组件修改，父组件同步
      })
  }
}

// 父组件
@Entry
@Component
struct TwoWayPage {
  @State inputValue: string = ''

  build() {
    Column({ space: 20 }) {
      Text(`父组件值: ${this.inputValue}`)
        .fontSize(18)
      
      EditComponent({
        value: this.inputValue       // 使用 $ 传递引用
      })
    }
    .padding(20)
  }
}

四、@Provide/@Consume：跨层级状态共享

当需要在多层组件间共享状态时，使用@Provide和@Consume：

// 顶层组件提供状态
@Entry
@Component
struct AppRoot {
  @Provide themeColor: string = '#3B82F6'
  @Provide userInfo: UserInfo = new UserInfo()

  build() {
    MainPage()
  }
}

// 深层子组件消费状态
@Component
struct DeepChild {
  @Consume themeColor: string       // 自动找到最近的Provider
  @Consume userInfo: UserInfo

  build() {
    Button('操作')
      .backgroundColor(this.themeColor)
      .onClick(() => {
        this.userInfo.name = 'New Name'  // 修改会同步到所有消费方
      })
  }
}

五、@Observed/@ObjectLink：对象深度监听

对于复杂对象，需要使用@Observed和@ObjectLink实现深度监听：

// 定义可观察对象
@Observed
class Task {
  id: number
  title: string
  completed: boolean

  constructor(id: number, title: string) {
    this.id = id
    this.title = title
    this.completed = false
  }
}

// 子组件
@Component
struct TaskItem {
  @ObjectLink task: Task            // 对象链接

  build() {
    Row() {
      Text(this.task.title)
        .decoration(this.task.completed ? TextDecorationType.LineThrough : TextDecorationType.None)
      
      Toggle({ type: ToggleType.Checkbox, isOn: this.task.completed })
        .onChange((isOn) => {
          this.task.completed = isOn   // 修改对象属性，UI同步更新
        })
    }
    .padding(15)
  }
}

// 父组件
@Entry
@Component
struct TaskList {
  @State tasks: Task[] = [
    new Task(1, '学习ArkTS'),
    new Task(2, '掌握状态管理')
  ]

  build() {
    List() {
      ForEach(this.tasks, (task) => {
        TaskItem({ task: task })     // 传递对象引用
      })
    }
  }
}

六、状态管理选择指南

不同场景下的状态管理方案选择：

装饰器	使用场景	数据流向	作用范围
@State	组件内部状态	内部管理	当前组件
@Prop	父传子，只读	单向传递	父子组件
@Link	父子双向绑定	双向同步	父子组件
@Provide/@Consume	跨层级共享	双向同步	多级组件
@Observed/@ObjectLink	对象深度监听	双向同步	父子组件