状态管理-@State

目录

概述

装饰器的使用规则

相关案例

@State装饰string、number、boolean

@State装饰enum

@State装饰class，Object及其嵌套

@State装饰数组，包含嵌套属性

---

概述

@State装饰的变量，可以称为状态变量，一旦变量拥有了状态属性，就和组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。

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

声明式范式https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-ui-development-overview-0000001438467628-V3

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

1、@State装饰的变量与子组件中的@Prop、@Link或@ObjectLink装饰变量之间建立单向或双向数据同步。

2、@State装饰的变量生命周期与其所属自定义组件的生命周期相同。

装饰器的使用规则

以上原理内容部分引自鸿蒙开发文档-@State装饰器

相关案例

@State装饰string、number、boolean

示例代码及运行结果演示：

@Entry
@Component
struct StatePage {
  @State msg: string = 'Hello World'
  @State num: number = 10
  @State isEven: boolean = true
  build() {
    Row() {
      Column({space: 10}) {
        Text(this.msg)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.msg = 'Hello ArkTS!'
          })
        Text('num：' + this.num)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.num += 1
          })
        Text('num是否是偶数：' + this.isEven)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            if (this.num % 2 === 0) {
              this.isEven = true
            }else {
              this.isEven = false
            }
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@State装饰enum

示例运行demo

enum AnimalName{
  Dog = 'DOG',
  Cat = 'CAT',
  Monkey = 'MONKEY',
  Lion = 'LION',
  Tiger = 'Tiger'
}
 
@Entry
@Component
struct StatePage {
  @State animal: AnimalName = AnimalName.Dog
  build() {
    Row() {
      Column({space: 10}) {
        Text('动物名字是：' + this.animal)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.animal = AnimalName.Cat
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

@State装饰class，Object及其嵌套

代码运行demo

class Person{
  name: string
  age: number
  father: Person
 
  constructor(name: string, age: number, father?: Person) {
    this.name = name
    this.age = age
    this.father = father
  }
}
 
@Entry
@Component
struct StatePage {
  @State person: Person = new Person('王五', 20)
  @State person1: Person = new Person('张三', 20, new Person('李四', 43))
  @State person2: Person = new Person('Jack', 20, new Person('Tom', 43))
  build() {
    Row() {
      Column({space: 30}) {
        Text(this.person.name + ':' + this.person.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.person.age += 1
          })
        //对象的嵌套渲染在一个组件中时，且属性值同时发生改变，也会触发嵌套对象的渲染
        //因为非嵌套对象的属性发生了变化触发了页面渲染，因此嵌套对象属性值的改变也会同时渲染出来
        Text(this.person1.name + ':' + this.person1.age + '\n' +
        'my father is:' + this.person1.father.name + ':' + this.person1.father.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.person1.age += 1
            this.person1.father.age += 1
          }).fontColor('#0000ff')
          .width('100%')
 
        Text(this.person2.name + ':' + this.person2.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.person2.age += 1
          }).fontColor('#00ff00')
        Text(this.person2.father.name + ':' + this.person2.father.age)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.person2.father.age += 1
          }).fontColor('#00ff00')
      }
      .width('100%')
      .padding(30)
    }
    .height('100%')
  }
}

@State装饰数组，包含嵌套属性

当数组中是对象时，对象的属性变更不会触发页面渲染，对数组本身的更改，可以触发页面渲染，可以理解为不可穿透渲染。

class Person{
  rank: string
  name: string
  age: number
  father: Person
 
  constructor(rank: string, name: string, age: number, father?: Person) {
    this.rank = rank
    this.name = name
    this.age = age
    this.father = father
  }
}
 
@Entry
@Component
struct StatePage {
  empId: number = 1
  @State array: Array<number> = [0,1,2,3,4]
  @State person: Person = new Person('老板', '张三', 45)
  @State employee: Array<Person> = []
  build() {
    Row() {
      Column({space: 10}) {
        Text(this.array.toString())
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.array.push(8)
          })
        Text(`${this.person.rank}-${this.person.name}:${this.person.age}`)
          .fontSize(25)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.person.age++
          })
        Button('添加员工')
          .onClick(() => {
            this.employee.push(new Person('员工', '员工' + this.empId++, 20))
          })
        ForEach(
          this.employee,
          (employee: Person, index) =>{
            Row({space: 10}){
              Text(`${employee.rank}-${employee.name}:${employee.age}`)
                .fontSize(25)
                .fontColor('#00ff00')
                .onClick(() =>{
                  //不会触发页面渲染，因此点击不会发生改变，但实际属性值已经变更
                  // employee.age++
                  //如果重新给该员工赋值，也就是改变改索引处的值，则会触发页面渲染，更新页面
                  this.employee[index] = new Person('经理', employee.name, employee.age+1)
                })
              Button('删除')
                .onClick(() =>{
                  this.employee.splice(index)
                })
            }
          }
        )
      }
      .width('100%')
      .padding(30)
    }
    .height('100%')
  }
}