OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法原创精华

陈浩南xxx

发布于 2022-4-7 14:16

浏览

2收藏

@State 实例化的对象之间数据独立

@State

支持类型class、number、boolean、string，以及这些类型的数组。
@State装饰的变量是组件的局部变量，必须本地初始化，可通过构造参数赋值
实例化的对象之间数据独立

OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-鸿蒙开发者社区

@Entry
@Component
struct StateDemo {
  @State count: number = 0

  private toggleClick() {
    this.count += 1
  }

  build() {
    Column() {
      Text('@State组件内不同实例的状态数据是独立的').fontSize(24)

      Button(`父组件点我: ${this.count}`).fontSize(24)
        .onClick(this.toggleClick.bind(this))
        .margin({ top: 20 })


      MyComponent()

      MyComponent({ count: 11 })

    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct MyComponent {
  @State count: number = 0

  build() {
    Column() {
      Button(`子组件: ${this.count}`).fontSize(24).onClick(() => {
        this.count += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

状态变量(@State，@Prop，@Link)发生变化时，会调用该变量所在组件的build方法重新渲染UI

@State的改变

OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-鸿蒙开发者社区

@Prop的改变

OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-鸿蒙开发者社区

@Link的改变

OpenHarmony ETS 状态变量(@State，@Prop，@Link) 图文秒懂用法-鸿蒙开发者社区

@Entry
@Component
struct Prop_linkDemo {
  @State counter: number = 0
  private todayDate = '2021.11.29'

  private toggleClick() {
    this.counter += 1
  }

  build() {
    Column() {
      Text('@State @Prop @Link 演示').fontSize(24)

      Button(`父组件State: ${this.counter}`).fontSize(24)
        .onClick(this.toggleClick.bind(this))
        .margin({ top: 20 })


      ChildProp({ counterVal: this.counter })
      ChildLink({ counterRef: $counter })

      Text('总结：状态变量(@State，@Prop，@Link)发生变化时，会调用该变量所在组件的build方法重新渲染UI')
        .fontColor('#FF0000')
        .fontSize(24)
        .margin({ top: 20 })

    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct ChildProp {
  @Prop counterVal: number;

  build() {
    Column() {
      Text('@Prop 单向的 内部修改不会改变父组件').fontSize(24)

      Button(`子组件Prop: ${this.counterVal}`).fontSize(24).onClick(() => {
        this.counterVal += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}

@Component
struct ChildLink {
  @Link counterRef: number

  build() {
    Column() {
      Text('@Link 类似传引用 内部修改会引起外部的改变').fontSize(24)

      Button(`子组件Link: ${this.counterRef}`).fontSize(24).onClick(() => {
        this.counterRef += 1
      })
    }.width('100%')
    .margin({ top: 50 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.