鸿蒙HarmonyOS实战:状态管理和传值

打印 上一主题 下一主题

主题 539|帖子 539|积分 1617

状态管理

@State

@State是一个装饰器,是用来存放数据的,比力好理解
   由@State的数据来举行状态驱动视图更新
  代码很简单
  1. @State count: number = 0;
复制代码
  必要注意的是@State初始化的数据必须赋值
  这里我们讨论简单用法,至于复杂的用法可以到项目中先容
传值

关于传值,官网给了一张图片,我们目前只关注组件的传值即可


通过这个图我们观察出,有父母,有孩子,有子孙,这体现出了组件之间的层级关系,有层级了才能体现出传递性
同时我们还发现,有的箭头是单向的,有的是双向的,所以证明父-子-孙之间是可以相互举行数据传递的,此中就会有单层传递,也可以跨层传递,所以就会有不同的装饰器来完成对应的功能
实在根据这个图,有别的框架学习经验的朋侪已经大概了解了,也能看出来哪个是单向的装饰器,哪个是双向的,以及哪个是跨级的了
那咱们挨个先容吧~
@Prop、@Link装饰器

@Prop装饰器用来举行父子组件的通信,并且是单向的传递
但是这里必要注意的是,用@Prop装饰的数据是不可以举行赋值的
  1. @Entry
  2. @Component
  3. struct Demo {
  4.   @State message: string = 'shaka'
  5.   build() {
  6.     Row() {
  7.       Column() {
  8.         Text(this.message)
  9.           .fontSize(50)
  10.           .fontWeight(FontWeight.Bold)
  11.         Button('改变子组件数据')
  12.           .width(200)
  13.           .height(200)
  14.           .onClick(()=>{
  15.             this.message = 'virgo'
  16.           })
  17.         Son({name:this.message})
  18.       }
  19.       .width('100%')
  20.     }
  21.     .height('100%')
  22.   }
  23. }
  24. @Component  //子组件
  25. struct Son {
  26.   @Prop name:string //不能进行赋值
  27.   build() {
  28.     Row(){
  29.       Text(this.name)
  30.         .fontSize(50)
  31.       Button('改变父组件数据')
  32.         .width(200)
  33.         .height(200)
  34.         .backgroundColor(Color.Orange)
  35.         .onClick(()=>{
  36.           this.name = 'hhh'
  37.         })
  38.     }
  39.   }
  40. }
复制代码

   

    此时数据只能由父组件传递给子组件,不能从子组件传递给父组件
  那么我们的@Link装饰器则是可以举行双向传递
我们只必要把之前代码的@Prop改成@Link即可


这回可以举行双向通信了
@Provide装饰器和@Consume装饰器

父子通信完事了,我们可以举行跨级别通信了,也就是爷孙传值


  1. @Entry
  2. @Component
  3. struct Grandpa {
  4.   @Provide name: string = 'shaka'
  5.   build() {
  6.     Row() {
  7.       Column({ space: 20 }) {
  8.         Text(this.name)
  9.           .onClick(() => {
  10.             this.name = '这是爷组件改变的'
  11.           })
  12.           .backgroundColor(Color.Gray)
  13.           .width(200)
  14.           .height(100)
  15.           .fontSize(50)
  16.         Divider()
  17.         Father()
  18.       }.width('100%')
  19.     }.height('100%')
  20.   }
  21. }
  22. @Component
  23. struct Father {
  24.   build() {
  25.     Column({ space: 20 }) {
  26.       Text('这是子组件')
  27.         .backgroundColor(Color.Red)
  28.         .width(200)
  29.         .height(100)
  30.         .fontSize(50)
  31.       Divider()
  32.       Des()
  33.     }
  34.   }
  35. }
  36. @Component
  37. struct Des {
  38.   @Consume name: string
  39.   build() {
  40.     Column() {
  41.       Text( this.name)
  42.         .onClick(() => {
  43.           this.name = '这是孙组件改变的'
  44.         })
  45.         .backgroundColor(Color.Orange)
  46.         .width(200)
  47.         .height(150)
  48.         .fontSize(50)
  49.     }
  50.   }
  51. }
复制代码
必要注意的是@Provide和@Consume装饰的变量名应保持一致,或者用变量别名
这里官网给了示例




效果是一样的



如许可以举行爷孙传值,并且是双向的
结尾

大致先容了一下,ArcTS中的状态管理,以及各种传值,对于接触过别的框架的朋侪理解起来非常轻松
此中 @Observed装饰器和@ObjectLink装饰器是针对于嵌套的数据范例,实在重要针对的就是class的情势
而关于class范例的数据范例,实在就是面向对象编程头脑
盼望对您有帮助

最后
有很多小同伴不知道学习哪些鸿蒙开辟技能?不知道必要重点把握哪些鸿蒙应用开辟知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习黑白常有必要的。 
鸿蒙HarmonyOS Next全套学习资料←点击领取!(安全链接,放心点击
这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开辟必把握的焦点知识要点,内容包含了(ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开辟、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技能知识点。
盼望这一份鸿蒙学习资料能够给大家带来帮助,有必要的小同伴自行领取,限时开源,先到先得~无套路领取!!
鸿蒙(HarmonyOS NEXT)最新学习门路

有了门路图,怎么能没有学习资料呢,小编也预备了一份联合鸿蒙官方发布条记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开辟入门教学视频,内容包含:ArkTS、ArkUI、Web开辟、应用模型、资源分类…等知识点。
获取以上完整版高清学习门路,请点击→纯血版全套鸿蒙HarmonyOS学习资料
HarmonyOS Next 最新全套视频教程

《鸿蒙 (OpenHarmony)开辟基础到实战手册》
OpenHarmony北向、南向开辟环境搭建

《鸿蒙开辟基础》


  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开辟
  • .……

《鸿蒙开辟进阶》


  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开辟
  • 关照与窗口管理
  • 多媒体技能
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开辟
  • 应用测试
  • DFX面向将来计划
  • 鸿蒙系统移植和裁剪定制
  • ……

《鸿蒙进阶实战》


  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

大厂口试必问口试题

鸿蒙南向开辟技能

鸿蒙APP开辟必备

鸿蒙生态应用开辟白皮书V2.0PDF

获取以上完整鸿蒙HarmonyOS学习资料,请点击→

纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个寻衅,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的期间中立于不败之地。 


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

王柳

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表