鸿蒙 - arkTs:状态管理

状态 @State:

在声明式UI中,以状态驱动视图更新

  1. 状态(State):指驱动视图更新的数据(被装饰器标记的变量)
  2. 视图(View):基于UI描述渲染得到的用户界面

使用示例:

复制代码
@Entry
@Component
struct Index {
  // 使用状态装饰器
  @State message: string = 'Hello Word'

  build() {
    Column(){
      Text(this.message)
    }
  };
}

说明:

  • @State装饰器标记的变量初始化必须有值
  • @State支持Object、Class、string、number、boolean、enum类型以及这些类型的数组
  • 嵌套类型以及数组中的对象属性无法触发视图更新(相当于浅层监听)

父子组件数据同步 @Prop和@Link:

对比:

|-----------|-------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------|
| | @Prop | @Link |
| 同步类型 | 单向同步 | 双向同步 |
| 允许装饰的变量类型 | * @Prop只支持string、number、boolean、enum类型 * 父组件对象类型,子组件hi对象类型 * 不可以是数组,any | * 父子类型一致:string、number、boolean、enum、object、class以及他们的数组 * 数组中元素增、删、替换会引起刷新 * 嵌套类型以及数组中的对象属性无法触发视图更新 |
| 初始化方式 | 不允许子组件初始化 | 父子间传递,不允许子组件初始化 |

@Prop使用示例:

PS:@Prop定义的数据在子组件不能初始化

复制代码
@Entry
@Component
struct Index {
  @State msg: string = 'Hello Word'

  build() {
    Column() {
      MsgModule({msg:this.msg})
      Button('更改文案')
        .onClick(()=>{
          this.msg = 'Hello arkTs'
        })
    }
  }
}

@Component
struct MsgModule {
  @Prop msg:string
  build(){
    Text(this.msg)
      .fontSize(30)
      .fontColor('red')
  }
}

@Link使用示例:

PS:

  • @Link定义的数据在子组件不能初始化

  • @Link定义的数据,父组件在使用时候,去掉"this."且前边加"$"符号

    @Entry
    @Component
    struct Index {
    @State msg: string = 'Hello Word'

    复制代码
    build() {
      Column() {
        MsgModule({msg: $msg})
      }
    }

    }

    @Component
    struct MsgModule {
    @Link msg:string
    build(){
    Row(){
    Text(this.msg)
    .fontSize(30)
    .fontColor('red')
    Button('更改文案')
    .onClick(()=>{
    this.msg = 'Hello arkTs'
    })
    }
    }
    }


@Provide和@Consume:(跨组件提供双向的数据同步)

@Provide定义的数组,其他组件在使用时候直接使用@Consume定义使用,不需要在调用组件时候进行参数传递

使用示例:

复制代码
@Entry
@Component
struct Index {
  @Provide msg: string = 'Hello Word'

  build() {
    Column() {
      MsgBtnModule()
    }
  }
}

@Component
struct MsgBtnModule {
  build(){
    Row(){
      MsgModule()
    }
  }
}

@Component
struct MsgModule {
  @Consume msg: string
  build(){
    Row(){
      Text(this.msg)
        .fontSize(30)
        .fontColor('red')
      Button('更改文案')
        .onClick(()=>{
          this.msg = 'Hello arkTs'
        })
    }
  }
}

@ObjectLink和@Observed:(涉及嵌套对象或数组元素为对象的场景中进行双向数据同步)

使用示例:

复制代码
@Observed
class ArrInt {
  name: string = ""
  price: number = 0
}

@Entry
@Component
struct Index {
  @State num:number = 0
  @State arr: ArrInt[] = [
    {name: '华为 Meta 50',price: 7999},
    {name: '华为 Meta 60',price: 8999},
    {name: '华为 Meta 60 pro',price: 9999},
  ]


  build() {
    Column() {
      Text('涨价' + this.num.toString() + '次')
        .fontSize(50)
        .margin(20)
      ArrModule({num: $num, arr: $arr})
    }
  }
}

@Component
struct ArrModule {
  @Link num: number
  @Link arr: ArrInt[]

  build(){
    Row(){
      List({space: 10}){
        ForEach(
          this.arr,
          (item: ArrInt) => {
            ListItem(){
              ArrItemModule({item:item, num: $num})
            }
          }
        )
      }
    }
  }
}

@Component
struct ArrItemModule {
  @ObjectLink item: ArrInt
  @Link num: number

  build(){
    Column(){
      Text(this.item.name)
        .fontSize(30)
        .fontColor('red')
      Text(this.item.price.toString())
        .fontSize(30)
        .fontColor('#000')
      Button('涨价')
        .onClick(()=>{
          this.num += 1
        })
    }
  }
}
相关推荐
脑子缺根弦1 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳10 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼13 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳14 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG16 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺21 小时前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏
博睿谷IT99_1 天前
入门华为人工智能,HCIA/HCIP/HCIE该怎么选?
人工智能·华为·华为认证
江湖有缘1 天前
基于华为欧拉系统安装FileGator文件管理器
华为
小周学学学1 天前
zabbix以SNMP(V2C)监控网络设备,以华为设备为例
服务器·华为·zabbix
Georgewu2 天前
【HarmonyOS组件/模板集成创新活动-如何高效开发鸿蒙应用 (鸿社圈子)】
harmonyos