《鸿蒙第一行代码》第七课 状态管理State

《鸿蒙第一行代码》第七课 状态管理State

State: 是最简单的状态

• 1、必须一开始就初始化
• 2、它值变会触发build方法执行，从而影响引用它的组件重新构造
• 3、没法传给其他组件同样被@State修饰的变量，即可以说@State是独立的

如果状态要用在@Builder的方法里，需要类似这样定义：FiltrateBuilder($$:{showFiltrate:boolean})

简单示例代码：

@Entry @Component struct ComponentTest {

  @State date: string = "时间：" + new Date().getTime(); // data变化会触发build方法执行

  build() {
    Column({space: 10}) {
      Text(`父组件【${this.date}】`)
        .fontSize(20)
        .backgroundColor(Color.Pink)

      //Item({time:this.date}) // 子组件 @State不能传给@State变量
      Item()  // 子组件
      Button('更新时间')
        .onClick(() => {
          this.date = "时间：" + new Date().getTime();   // 点击按钮，date变化，会触发build方法执行
        })
    }
    .width('100%')
    .height('100%')
    .padding(10)
  }
}

// 自定义子组件
@Component struct Item {

  @State time: string = "时间：" + new Date().getTime();

  build() {
    Text(`子组件【${this.time}】`)
      .fontSize(20)
      .backgroundColor(Color.Grey)
      .onClick(() => {
        this.time = "时间：" + new Date().getTime();     // 点击更新时间，执行build方法
      })
  }
}

《鸿蒙第一行代码》项目代码结构图：

有需要《鸿蒙第一行代码》项目源码的私信我，我每天都看私信的