ArkUI 状态管理

@State

在声明式UI中，是以状态驱动视图更新，核心概念就是状态和视图。

状态（state）：指驱动视图更新的数据（一个变量，加上@State装饰器，它就变成了状态变量）

视图（View）：基于UI描述渲染的到用户界面

说明：

• @State装饰器标记的变量必须初始化，不能为空值
• @State支持Object, class, string, number, boolean, enum类型以及这些类型的数组
• 嵌套类型以及数组中的对象属性无法触发视图更新

@Prop和@Link

当父子组件之间需要数据同步时，可以使用@Prop和@Link装饰器。

示例代码：

@Entry
@Component
struct Parent{
  @State name: string = 'zhangsan'
  @State age: number = 20
  
  build() {
    Column(){
      Child({name: this.name, age: $age})
    }
  }
}

@Component
struct Child{
  @Prop name: string
  @Link age: number
  
  build() {
    Column({space: 10}){
      Text('name:' + this.name)
      Text('age:' + this.age)
      Button('点击')
        .onClick(() => {
          this.age ++
        })
    }
  }
}

@Provide和@Consume

@Provide和@Consume可以跨组件提供类似于@State和@Link的双向同步。

不需要手动传递参数，由组件内部来维护，对资源的消耗会大一些，不需要跨组件传参的情况，尽量不使用。

示例代码：

@Entry
@Component
struct Parent{
  @Provide age: number = 20
  
  build() {
    Column(){
      Text('父组件 age:' + this.age)
      Child()
    }
  }
}

@Component
struct Child{
  @Consume age: number
  
  build() {
    Column({space: 10}){
      Text('子组件 age:' + this.age)
      Button('点击')
        .onClick(() => {
          this.age ++
        })
    }
  }
}

@Observed和@ObjectLink

@Observed和@ObjectLink装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步。

示例代码：

@Observed
class Person {
  name: string
  age: number
  gf: Person // 女朋友

  constructor(name: string, age: number, gf?: Person) {
    this.name = name
    this.age = age
    this.gf = gf
  }
}

@Entry
@Component
struct Parent {
  @State person: Person = new Person('Jack', 21, new Person('Rose', 18))
  @State gfs: Person[] = [
    new Person('萝丝', 18), new Person('露西', 19)
  ]

  build() {
    Row() {
      Column() {
        Text('-------女友对象------')
        Child({person: this.person.gf})
          .onClick(() => this.person.gf.age ++)
        Text('-------女友列表------')
        ForEach(
          this.gfs,
          item => {
            Child({person: item}).onClick(() => item.age ++)
          }
        )
      }
    }
  }
}

@Component
struct Child {
  @ObjectLink person: Person

  build() {
    Column({ space: 10 }) {
      Text(`${this.person.name} : ${this.person.age}`)
    }
  }
}