HarmonyOS Next快速入门：@State状态变量

HarmonyOS Next快速入门##HarmonyOS应用开发##教育

点击跳转《HarmonyOS Next快速入门》视频教程

ArkUI作为一种声明式UI，具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在ArkUI中，我们只需要通过一个变量来记录状态。当改变状态的时候，ArkUI就会自动更新界面中受影响的部分。

概述
@State装饰的变量，与声明式范式中的其他被装饰变量一样，是私有的，只能从组件内部访问，在声明时必须指定其类型和本地初始化。初始化也可选择使用命名参数机制从父组件完成初始化。

@State装饰的变量拥有以下特点：

• @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步，与@Link、@ObjectLink装饰变量之间建立双向数据同步。
• @State装饰的变量生命周期与其所属自定义组件的生命周期相同。

限制条件
@State装饰的变量必须初始化，否则编译期会报错。
@State不支持装饰Function类型的变量，框架会抛出运行时错误。
不允许在build里改变状态变量，状态管理框架会在运行时报出Error级别日志。

State支持联合类型实例
@State支持联合类型和undefined和null，在下面的示例中，count类型为number | undefined，点击Button改变count的属性或者类型，视图会随之刷新。

变量的传递和访问规则说明

• 从父组件初始化：可选，从父组件初始化或者本地初始化。如果从父组件初始化，并且从父组件传入的值非undefined，将会覆盖本地初始化；如果从父组件传入的值为undefined，则初值为@State装饰变量自身的初值。支持父组件中常规变量（常规变量对@State赋值，只是数值的初始化，常规变量的变化不会触发UI刷新，只有状态变量才能触发UI刷新）
• 用于初始化子组件：@State装饰的变量支持初始化子组件的常规变量
• 是否支持组件外访问：不支持，只能在组件内访问。

@State装饰的变量，或称为状态变量，一旦变量拥有了状态属性，就可以触发其直接绑定UI组件的刷新。当状态改变时，UI会发生对应的渲染改变。
代码实例

@Entry
@Component
struct StatePage {
   
  @State message: string = '第1节 @State';
  count:number=0
  @State stateCount:number=0

  build() {
   
    Column({
   space:10}) {
   
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      Button('增加次数').onClick(()=>{
   
        this.count++
        this.stateCount++
      })
      Text('count='+this.count)
      Text('stateCount='+this.stateCount)
    }
    .height('100%')
    .width('100%')
  }
}