【鸿蒙HarmonyOS开发笔记】状态管理入门

状态管理

为了方便开发者管理组件状态，ArkTS 提供了一系列状态相关的装饰器，例如@State，@Prop，@Link，@Provide和@Consume等等。

---

@State

@State用于装饰当前组件的状态变量，@State装饰的变量发生变化时会驱动当前组件的视图刷新。

注意：@State装饰的变量必须进行本地初始化。
具体语法如下

@State count:number = 1;

案例

@Entry
@Component
struct StatePage {
  @State count: number = 1;

  build() {
    Column({ space: 50 }) {

      Row({ space: 10 }) {
        Text('@State').textStyle()
        //计数器
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
      .width('100%')
      .backgroundColor("#CCE3CB")
      .padding(10)
      .borderRadius(20)
      .justifyContent(FlexAlign.Center)

    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .padding(10)

  }
}


@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

---

@Prop

@Prop也可用于装饰状态变量，@Prop装饰的变量发生变化时也会驱动当前组件的视图刷新，除此之外，@Prop装饰的变量还可以同步父组件中的状态变量，但只能单向同步，也就是父组件的状态变化会自动同步到子组件，而子组件的变化不会同步到父组件。

注意：@Prop装饰的变量不允许本地初始化，只能通过父组件向子组件传参进行初始化。

具体语法如下

父组件

@Entry
@Component
struct Parent{
  @State count:number = 1;
  build(){
    Column(){
      Child({count:this.count});
    }
  }
}

子组件

@Component
export struct Child{
  @Prop count:number;
  build(){
    Text(this.count.toString());
  }
}

---

@Link

@Link也可用于装饰状态变量，@Link装饰的变量发生变化时也会驱动当前组件的视图刷新，除此之外，@Link变量同样会同步父组件状态，并且能够双向同步。也就是父组件的变化会同步到子组件，子组件的变化也会同步到父组件。

注意：@Link装饰的变量不允许本地初始化，只能由父组件通过传参进行初始化，并且父组件必须使用$变量名的方式传参，以表示传递的是变量的引用。

父组件

@Entry
@Component
struct Parent{
  @State count:number = 1;
  build(){
    Column(){
      Child({count:$count});
    }
  }
}

子组件

@Component
export struct Child{
  @Link count:number;
  build(){
    Text(this.count.toString());
  }
}

---

@Provide和@Consume

@Provide和@Consume用于跨组件层级传递状态信息，其中@Provide用于装饰祖先组件的状态变量，@Consume用于装饰后代组件的状态变量。可以理解为祖先组件提供（Provide）状态信息供后代组件消费（Consume），并且祖先和后代的状态信息可以实现双向同步。

注意：@Provide装饰变量必须进行本地初始化，而@Consume装饰的变量不允许进行本地初始化。另外，@Provide和@Consume装饰的变量不是通过父组件向子组件传参的方式进行绑定的，而是通过相同的变量名进行绑定的。

祖先组件

@Entry
@Component
struct GrandParent {
  @Provide count: number = 1;
  build() {
    Column() {
      Parent()
    }
  }
}

父组件

@Component
struct Parent {
  build() {
    Column() {
      Child()
    }
  }
}

子组件

@Component
struct Child {
  @Consume count:number;
  build() {
    Column() {
      Text(this.count.toString());
    }
  }
}

---

除了通过变量名进行绑定，还可通过变量的别名进行绑定，具体语法如下

祖先组件

@Entry
@Component
struct GrandParent {
    @Provide('count') parentCount: number = 1;
    build() {
        Column() {
            Parent()
        }
    }
}

父组件

@Component
struct Parent {
  build() {
    Column() {
      Child()
    }
  }
}

子组件

@Component
struct Child {
  @Consume('count') childCount:number;
  build() {
    Column() {
      Text(this.count.toString());
    }
  }
}