鸿蒙5状态管理入门：@State/@Prop/@Link装饰器解析

暗雨OL

发布于 2025-6-30 01:49

浏览

0收藏

在鸿蒙5应用开发中，状态管理是构建响应式UI的核心。ArkCompiler提供了多种装饰器来帮助开发者高效管理组件状态，其中最基础且常用的是@State、@Prop和@Link装饰器。本文将深入解析这三种装饰器的使用场景、区别以及实际应用。

@State装饰器
@State装饰的变量是组件的内部状态数据，当状态变化时，会触发UI重新渲染。@State变量具有以下特点：

只能被当前组件访问
变化时会触发UI更新
通常用于组件内部私有状态管理
// 示例代码：使用@State管理计数器
@Entry
@Component
struct StateExample {
@State count: number = 0

build() {
Column() {
Text(计数器: ${this.count})
.fontSize(30)
.margin(20)

  Button('增加')
    .onClick(() => {
      this.count++
    })
    .margin(10)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}
2. @Prop装饰器
@Prop装饰的变量用于父子组件之间的单向数据传递，具有以下特点：

从父组件传递到子组件
子组件不能修改@Prop变量（修改不会影响父组件）
适用于父组件控制子组件显示的场景
// 父组件
@Entry
@Component
struct ParentComponent {
@State parentCount: number = 0

build() {
Column() {
Text(父组件计数器: ${this.parentCount})
.fontSize(30)
.margin(20)

  Button('父组件增加')
    .onClick(() => {
      this.parentCount++
    })
    .margin(10)
  
  // 将父组件的状态传递给子组件
  ChildComponent({ countProp: this.parentCount })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}

// 子组件
@Component
struct ChildComponent {
@Prop countProp: number

build() {
Column() {
Text(子组件接收的值: ${this.countProp})
.fontSize(20)
.margin(20)

  // 尝试修改会报错，因为@Prop是只读的
  // Button('子组件增加')
  //   .onClick(() => {
  //     this.countProp++
  //   })
}

}
}
3. @Link装饰器
@Link装饰的变量用于父子组件之间的双向数据绑定，具有以下特点：

父组件和子组件共享同一数据源
子组件可以修改@Link变量，修改会同步到父组件
适用于需要父子组件协同修改同一状态的场景
// 父组件
@Entry
@Component
struct ParentLinkComponent {
@State sharedCount: number = 0

build() {
Column() {
Text(父组件共享计数器: ${this.sharedCount})
.fontSize(30)
.margin(20)

  Button('父组件增加')
    .onClick(() => {
      this.sharedCount++
    })
    .margin(10)
  
  // 将父组件的状态通过@Link传递给子组件
  ChildLinkComponent({ countLink: $sharedCount })
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)

}
}

// 子组件
@Component
struct ChildLinkComponent {
@Link countLink: number

build() {
Column() {
Text(子组件共享计数器: ${this.countLink})
.fontSize(20)
.margin(20)

  Button('子组件增加')
    .onClick(() => {
      this.countLink++ // 可以修改，会同步到父组件
    })
}

}
}
三种装饰器的对比
特性 @State @Prop @Link
初始化方式组件内部初始化父组件传递父组件传递
可修改性组件内部可修改子组件不可修改子组件可修改
数据流向单向(内部) 单向(父→子) 双向(父↔子)
使用场景组件私有状态父控制子显示父子协同状态
实际应用建议
优先使用@State：对于组件内部状态，优先使用@State装饰器
简单展示用@Prop：当子组件只需要展示父组件传递的数据时，使用@Prop
协同操作用@Link：当父子组件需要共同操作同一数据时，使用@Link
避免过度使用@Link：过度使用双向绑定会使数据流难以追踪，应谨慎使用
通过合理使用这三种装饰器，可以构建出清晰、可维护的状态管理架构，充分发挥鸿蒙5 ArkCompiler的响应式特性。