鸿蒙组件级状态管理笔记

修饰符除了@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

相关推荐
齐 飞19 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
丫头,冲鸭!!!1 小时前
B树(B-Tree)和B+树(B+ Tree)
笔记·算法
听忆.1 小时前
手机屏幕上进行OCR识别方案
笔记
Selina K2 小时前
shell脚本知识点记录
笔记·shell
2 小时前
开源竞争-数据驱动成长-11/05-大专生的思考
人工智能·笔记·学习·算法·机器学习
霍格沃兹测试开发学社测试人社区3 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
幸运超级加倍~3 小时前
软件设计师-上午题-16 算法(4-5分)
笔记·算法
王俊山IT3 小时前
C++学习笔记----10、模块、头文件及各种主题(一)---- 模块(5)
开发语言·c++·笔记·学习
Yawesh_best4 小时前
思源笔记轻松连接本地Ollama大语言模型,开启AI写作新体验!
笔记·语言模型·ai写作
CXDNW6 小时前
【网络面试篇】HTTP(2)(笔记)——http、https、http1.1、http2.0
网络·笔记·http·面试·https·http2.0