ArkTS的变量的状态管理学习（组件)

上篇回顾 ArkTS语言的自定义组件的学习

本篇内容 ArkTS的组件变量的状态管理学习

一、知识储备

• @State
  ① 最常用的组件内部访问的变量装饰器 声明时必须实例化
• @Prop
  ① 与父类组件建立单向同步关系 声明时不用实例化，配合@State使用
• @Link
  ① 与父类组件建立双向同步关系 声明时不用实例化，配合@State使用
  ② 作为参数传递里直接使用$
• @Consume @Provide
  ① @Consume定义在子组件中进行使用， 不用实例化
  ② @Provide定义父组件中，需要实例化
  ③ 可以当前页面内任意调用，不需传递
• @ObjectLink @Observed
  ① @Observed定义在class前，使用时，需要new对象
  ② @ObjectLink定义子组件中，不用实例化

二、效果一览

三、源码及分析讲解

@Component
@Entry
struct DecoratePage {
  @State school: string = '希望小学'
  @State clazz: string = '一年级'
  @State name: string = '王二小'
  @Provide sex: string = '男'
  @State child: Children = new Children(6)

  build() {
    Row() {
      Column() {
        Student({
          school: `${this.school}`,
          clazz: `${this.clazz}`,
          child: this.child,
          name: $name
        })
        Button('上初中了')
          .onClick(() => {
            this.school = '春天中学'
          })
        Button('长大一岁')
          .onClick(() => {
            this.child.age += 1
          })
        Button('改名字了')
          .onClick(() => {
            this.name = '王二中'
          })
        Button('改性别了')
          .onClick(() => {
            this.sex = '女'
          })
        Button('年级变了')
          .onClick(() => {
            this.clazz = '三年级'
          })
        Text(
          `父：${this.name}是${this.school}的${this.clazz}的学生，性别(${this.sex})，今年${this.child.age}岁了`
        )
      }
    }
  }
}

@Component
struct Student {
  @State school: string = '希望小学' //  组件内部访问的变量装饰器  声明时必须实例化
  @Prop clazz: string               //  与父类组件建立单向同步关系 声明时不用实例化
  @Link name: string                //  与父类组件建立双向同步关系 声明时不用实例化
  @Consume sex: string              //  先定义消费变量，直接使用   声明时不用实例化
  @ObjectLink child: Children;      //  不能在entry装饰的自定义组件中使用

  build() {
    Text(`子：${this.name}是${this.school}的${this.clazz}的学生，性别(${this.sex})，今年${this.child.age}岁了`)
      .onClick(() => {
        this.clazz = '二年级'
        this.school = '希望小学'
        this.name = '王二小'
        this.sex = '未知'
        this.child.age = 5
      })
  }
}


@Observed
class Person {
  public age: number

  constructor(age: number) {
    this.age = age;
  }
}

@Observed   // 配合ObjectLink装饰器使用
class Children extends Person {
  public age: number;

  constructor(age: number) {
    super(age)
    this.age = age;
  }
}