鸿蒙 - 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
        })
    }
  }
}
相关推荐
HarmonyOS_SDK1 小时前
京东携手HarmonyOS SDK首发家电AR高精摆放功能
harmonyos
二二孚日1 小时前
自用华为ICT云赛道Big Data第六章知识点-分布式搜索服务ElasticSearch
大数据·华为
塞尔维亚大汉1 小时前
鸿蒙内核源码分析(根文件系统) | 先挂到/上的文件系统
源码·harmonyos
别说我什么都不会1 小时前
【OpenHarmony】鸿蒙开发之Checksum
harmonyos
Fanmeang2 小时前
OSPF路由过滤
运维·网络·华为·ip·路由·ospf·路由过滤
周胡杰3 小时前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
simple丶5 小时前
【HarmonyOS】封装用户鉴权工具类
harmonyos·arkts·arkui
simple丶5 小时前
【HarmonyOS】基于Axios封装网络请求工具类
harmonyos·arkts·arkui
黑巧克力可减脂6 小时前
万物智联时代启航:鸿蒙OS重塑全场景开发新生态
鸿蒙系统
万少6 小时前
2-自然壁纸实战教程-AGC 新建项目
前端·harmonyos