@State装饰器

@State装饰器

在组件进行数据动态渲染的时候，需要用组件内部状态

@Entry
@Component
struct page_state {
  @State message:string = 'hello harmony'
  build() {
    Column(){

    }.width('100%')
    .height('100%')
  }
}

用@State装饰器定义的变量，代表组件的内部状态，只要这个变量发生变化，页面UI就会重新进行渲染。

特点：

1. @State来修饰变量，必须要求变量进行初始化，不能为空值
2. @State来修饰变量，可以支持object、class、string、number、boolean等等
3. 如果出现嵌套类型的数据结构，嵌套对象的属性发生改变、页面无法检测到更新
4. 标记为@State的变量默认都是私有变量，只能在组件内部使用。

关于复杂数据类型的定义

class userModel{
  name:string
  age:number
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

@Entry
@Component
struct Index {
  @State user:userModel = new userModel('name',12)
  @State users:userModel[] = [new userModel('name',12),new userModel('name',12)]
  @State users2:Array<userModel> = [new userModel('name',12),new userModel('name',12)]
  build() {
    Column() {
    }.width('100%')
    .height('100%')
  }
}

总结：
界面上用到的数据，并不是所有的数据都需要采用@State来修改，有些变量无需采用@State来修饰，只需要在页面加载一次就可以直接定义。