一、基本概念

我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。

在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。

二、@State 装饰器

class Person {
  name: string
  age: number
  girlfriend: Person

  // ?可选参数
  constructor(name: string, age: number, girlfriend?: Person) {
    this.name = name
    this.age = age
    this.girlfriend = girlfriend
  }
}

@Entry
@Component
struct StatePage {
  // 注意1：状态变量（必须初始化，不能为空值）
  @State name: string = 'Jack'
  @State age: number = 30
  
  // 改变对象属性的值，会触发页面重新渲染
  @State person1: Person = new Person('Tom', 20)
  // 注意2：对象嵌套对象，改变嵌套对象属性的值，不会触发页面重新渲染
  @State person2: Person = new Person('David', 26, new Person('Lily', 22))
  // 注意3：添加/删除/修改数组元素会触发页面重新渲染；修改数组中对象属性的值，不会触发页面重新渲染
  @State personList: Person[] = [
    new Person('张三', 18),
    new Person('李四', 19)
  ]

  build() {
    Row() {
      Column() {
        // 字符串模版语法
        Text(`${this.name} : ${this.age}`)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.age++
          })

        Text(`${this.person1.name} ， ${this.person1.age}`)
          .fontSize(30)
          .fontColor(Color.Blue)
          .onClick(value => {
            this.person1.age += 1
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

三、@Prop、@Link 装饰器

用途：用于父子组件数据同步传值

@Prop装饰属性(单向数据同步)：父组件向子组件传值，传的是变量的值

@Link装饰属性(双向数据同步)，父组件向子组件传值，必须带上$，表示传的是变量的引用