鸿蒙 - 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
        })
    }
  }
}
相关推荐
小白的孤独历险记7 小时前
华为eNSP:AAA认证(pap和chap)telnet/ssh
华为·智能路由器
鸿蒙自习室12 小时前
鸿蒙UI开发——小图标的使用
ui·华为·harmonyos
我爱学习_zwj13 小时前
ArkTS的进阶语法-3(内置对象,String字符串对象,数组的常用方法)
前端·华为·harmonyos
lqj_本人15 小时前
鸿蒙next版开发:ArkTS组件自定义事件拦截详解
华为·harmonyos
@逆风微笑代码狗16 小时前
133.鸿蒙基础01
华为·harmonyos
我爱学习_zwj20 小时前
ArkTS的进阶语法-1(泛型,工具类型,空安全)
前端·javascript·华为·harmonyos
雪芽蓝域zzs21 小时前
HarmonyOS 沉浸式状态实现的多种方式
华为·harmonyos
lqj_本人1 天前
Flutter&鸿蒙next 使用 BLoC 模式进行状态管理详解
flutter·华为·harmonyos
呆萌很1 天前
HCIP-HarmonyOS Application Developer 习题(二十一)
harmonyos
SoraLuna1 天前
「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
macos·ui·harmonyos