鸿蒙 - 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
        })
    }
  }
}
相关推荐
踏雪Vernon6 小时前
[OpenHarmony5.0][Docker][环境]OpenHarmony5.0 Docker编译环境镜像下载以及使用方式
linux·docker·容器·harmonyos
Andy醒10 小时前
HarmonyOS . 沉浸状态栏使用
harmonyos·鸿蒙
yuwinter10 小时前
鸿蒙HarmonyOS学习笔记(2)
笔记·学习·harmonyos
ZZZCY200310 小时前
华为ENSP--IP编址及静态路由配置
网络·华为
jikuaidi6yuan12 小时前
鸿蒙系统(HarmonyOS)分布式任务调度
分布式·华为·harmonyos
智慧化智能化数字化方案18 小时前
华为IPD流程管理体系L1至L5最佳实践-解读
大数据·华为
ZZZCY200319 小时前
华为VER系统及CLI命令熟悉
华为
SameX19 小时前
HarmonyOS Next 安全生态构建与展望
前端·harmonyos
SameX19 小时前
HarmonyOS Next 打造智能家居安全系统实战
harmonyos