上篇文章已经讲过了很多鸿蒙中state、prop、link等一些状态管理器。这篇文章接着总结其他的一些状态装饰器

@Track装饰器

这个装饰器是通过@state修饰的变量在通过一些修改之后产生了变化，这样和state绑定的ui会发生刷新，这样就会产生多余的消耗，导致界面多余的动作。当然为了避免这样的情况产生，就可以使用@track装饰器。

@Track是class对象的属性装饰器。当一个class对象是状态变量时，@Track装饰的属性发生变化，只会触发该属性关联的UI更新；如果class类中使用了@Track装饰器，则未被@Track装饰器装饰的属性不能在UI中使用，如果使用，会发生运行时报错。

@Entry
@Component
struct TrackPage {
  @State a: number = 1;
  @State b: number = 1;

  getSize(str: string): number {
    console.log('Tag', `${str}刷新`)
    return 18
  }

  build() {
    Column() {
      Text(`a: ${this.a}`)
        .fontSize(this.getSize('a'))
      Text(`b: ${this.b}`)
        .fontSize(this.getSize('b'))

      // 点击当前Button，可以发现当前虽然仅改变了a属性
      // 但是依旧会触发两个Text的刷新
      Button('change a').onClick(() => {
        this.a++
      })

      // 点击当前Button，可以发现当前虽然仅改变了b属性
      // 但是依旧会触发两个Text的刷新
      // Text(`name: ${this.info.name}`)是冗余刷新
      Button('change b').onClick(() => {
        this.b++;
      })
    }
    .height('100%')
    .width('100%')
  }
}

通过测试不管改变a还是b界面都会产生两次刷新

这时候使用@track时候需要将变量放到一个class中，在class中采用@track修饰即可

@Entry
@Component
struct TrackPage {
  @State myClass:myClass = new myClass()

  getSize(str: string): number {
    console.log('Tag', `${str}刷新`)
    return 18
  }

  build() {
    Column() {
      Text(`a: ${this.myClass.a}`)
        .fontSize(this.getSize('a'))
      Text(`b: ${this.myClass.b}`)
        .fontSize(this.getSize('b'))

      // 点击当前Button，可以发现当前虽然仅改变了a属性
      // 但是依旧会触发两个Text的刷新
      Button('change a').onClick(() => {
        this.myClass.a++
      })

      // 点击当前Button，可以发现当前虽然仅改变了b属性
      // 但是依旧会触发两个Text的刷新
      // Text(`name: ${this.info.name}`)是冗余刷新
      Button('change b').onClick(() => {
        this.myClass.b++;
      })
    }
    .height('100%')
    .width('100%')
  }

}

  class myClass {
    @Track a: number = 1;
    @Track b: number = 1;
  }

这时候打印就是一次

欢迎点赞，非常感谢！