鸿蒙组件级状态管理笔记

修饰符除了@State还有@Prop,@Link,@Provide和@Consume,@ObjectLink和@Observed

1.@State

当变量变化会引起ui变化

基本数据类型可以观察到(必须赋值),object和class直接属性没有问题,比如this.num++,但是类嵌套就不行比如两层类嵌套,this.p.num,好像现在可以监听到了,api5就可以监控到。数组类型,里面为类,加一个元素,减一个元素可以监听到,里面属性值变了,不能监听到。

2.@Prop 有点像某个属性关联到儿子的属性

父组件@State,子组件@Prop,父组件调用子组件,传值的话,就要用@Prop。

父亲可以同步到儿子这里来,但是儿子却不能同步到父亲那里,因为它是单向的。@Prop不可以触发同步更新,@Link可以触发。

不支持class,objec,数组 link就变成两个属性都相互关联。

3.@Link,和@Prop差不多,儿子可以同步到父亲那里。

支持class,object,数组

//子组件

Child({ count: $count })

原本@Prop和@Link不一样,现在都一样了,直接用this了

$count可以换成this,现在新版本就统一了

$变成这个变量的引用地址

复制代码
@Entry
@Component
struct Parent {
  @State count: number = 1;

  build() {
    Column() {
      Column({ space: 10 }) {
        //父组件标题
        Text('父组件').textStyle()
        //父组件计数器
        Row({ space: 10 }) {
          Text('@State').textStyle()
          Counter() {
            Text(this.count.toString()).textStyle()
          }
          .onInc(() => this.count++)
          .onDec(() => this.count--)
        }

        //子组件
        Child({ count: $count })
      }
      .containerStyle(Color.White)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#EFEFEF')
    .padding(10)
  }
}

@Component
struct Child {
  @Link count: number;

  build() {
    Column({ space: 10 }) {
      //子组件标题
      Text('子组件').textStyle()
      //子组件计数器
      Row({ space: 10 }) {
        Text('@Link').textStyle()
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
    }
    .containerStyle('#CCE3CB')
  }
}

@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

@Extend(Column) function containerStyle(color: ResourceColor) {
  .width('100%')
  .backgroundColor(color)
  .padding(10)
  .borderRadius(20)
}

4.@provide和@consume 就是孙子和祖先的关系

就是跨组件通知信息,跨了两代 单纯看名字,把@provide暴露出去,孙子些要用就@consume,就可以了。

复制代码
@Entry
@Component
struct GrandParent {
  @Provide count: number = 1;

  build() {
    Column() {
      Column({ space: 10 }) {
        //祖先组件标题
        Text('祖先组件').textStyle()
        //祖先组件计数器
        Row({ space: 10 }) {
          Text('@Provide').textStyle()
          Counter() {
            Text(this.count.toString()).textStyle()
          }
          .onInc(() => this.count++)
          .onDec(() => this.count--)
        }

        //父组件
        Parent()
      }
      .containerStyle(Color.White)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#EFEFEF')
    .padding(10)
  }
}


@Component
struct Parent {
  build() {
    Column({ space: 10 }) {
      //父组件标题
      Text('父组件').textStyle()
      //子组件
      Child()
    }
    .containerStyle('#CCE3CB')
  }
}


@Component
export struct Child {
  @Consume count: number;

  build() {
    Column({ space: 10 }) {
      //子组件标题
      Text('子组件').textStyle()
      //子组件计数器
      Row({ space: 10 }) {
        Text('@Consume').textStyle()
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
    }
    .containerStyle('#f6c867')
  }
}


@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

@Extend(Column) function containerStyle(color: ResourceColor) {
  .width('100%')
  .backgroundColor(color)
  .padding(10)
  .borderRadius(20)
}

@ObjectLink和Obeserved

观察第二层

在@Prop,@Link,@Provide与@Consume这几个装饰器仅能观察到第一层的变化,在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器的作用。

原文链接:https://blog.csdn.net/weixin_69253778/article/details/138847135

相关推荐
晓数1 小时前
【硬核干货】JetBrains AI Assistant 干货笔记
人工智能·笔记·jetbrains·ai assistant
我的golang之路果然有问题2 小时前
速成GO访问sql,个人笔记
经验分享·笔记·后端·sql·golang·go·database
lwewan2 小时前
26考研——存储系统(3)
c语言·笔记·考研
搞机小能手2 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类
nongcunqq3 小时前
爬虫练习 js 逆向
笔记·爬虫
汐汐咯3 小时前
终端运行java出现???
笔记
无敌小茶5 小时前
Linux学习笔记之环境变量
linux·笔记
帅云毅5 小时前
Web3.0的认知补充(去中心化)
笔记·学习·web3·去中心化·区块链
豆豆5 小时前
day32 学习笔记
图像处理·笔记·opencv·学习·计算机视觉
nenchoumi31196 小时前
VLA 论文精读(十六)FP3: A 3D Foundation Policy for Robotic Manipulation
论文阅读·人工智能·笔记·学习·vln