网页游戏大全排行,一个网站做两个优化可以做吗,软件工程培训班出来好就业吗,有名的软件开发公司状态管理
ArkUI开发框架提供了多维度的状态管理机制#xff0c;和UI相关联的数据#xff0c;不仅可以在组件内使用#xff0c;还可以在不同组件层级间传递#xff0c;比如父子组件之间#xff0c;爷孙组件之间等#xff0c;也可以是全局范围内的传递#xff0c;还可以是… 状态管理
ArkUI开发框架提供了多维度的状态管理机制和UI相关联的数据不仅可以在组件内使用还可以在不同组件层级间传递比如父子组件之间爷孙组件之间等也可以是全局范围内的传递还可以是跨设备传递。另外从数据的传递形式来看可以分为只读的单向传递和可变更的双向传递。如下图所示开发框架提供了多种应用程序状态管理的能力。 State修饰符
State 装饰的变量是组件内部的状态数据当这些状态数据被修改时将会调用所在组件的 build() 方法刷新UI。 State 状态数据具有以下特征 支持多种数据类型允许 class 、 number 、 boolean 、 string 强类型的按值和按引用类型。允许这些强类型构成的数组即Arrayclass、Arraystring、Arrayboolean、Arraynumber。不允许 object 和 any。 内部私有标记为 State 的属性是私有变量只能在组件内访问。 支持多个实例组件不同实例的内部状态数据独立。 需要本地初始化必须为所有 State 变量分配初始值将变量保持未初始化可能导致框架行为未定义初始值需要是有意义的值比如设置 class 类型的值为 null 就是无意义的会导致编译报错。 创建自定义组件时支持通过状态变量名设置初始值在创建组件实例时可以通过变量名显式指定 State 状态属性的初始值。
鸿蒙OS开发更多内容↓点击HarmonyOS与OpenHarmony技术鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这
简单样例如下所示 Entry Component struct ComponentTest {State date: string 时间 new Date().getTime(); // data变化会触发build方法执行build() {Column({space: 10}) {Text(父组件【${this.date}】) // 显示时间.fontSize(20).backgroundColor(Color.Pink)Item() // 子组件Item() // 子组件Button(更新时间).onClick(() {this.date 时间 new Date().getTime(); // 点击按钮date变化会触发build方法执行})}.width(100%).height(100%).padding(10)}}// 自定义子组件Component struct Item {State time: string 时间 new Date().getTime();build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time 时间 new Date().getTime(); // 点击更新时间执行build方法})}}
样例运行结果如下图所示 Prop修饰符
开发应用知识已更新gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md参考前往。
Prop 与 State 有相同的语义但初始化方式不同 Prop 装饰的变量可以和父组件的 State 变量建立单向的数据绑定。即 Prop 修饰的变量必须使用其父组件提供的 State 变量进行初始化允许组件内部修改 Prop 变量值但更改不会通知给父组件。 Prop 状态数据具有以下特征 支持简单数据类型仅支持 number 、 string 、 boolean 简单类型 内部私有标记为 Prop 的属性是私有变量只能在组件内访问。 支持多个实例组件不同实例的内部状态数据独立。 不支持内部初始化在创建组件的新实例时必须将值传递给 Prop 修饰的变量进行初始化不支持在组件内部进行初始化。 简单样例如下所示 Entry Component struct ComponentTest {State date: string 时间 new Date().getTime();build() {Column({space: 10}) {Text(父组件【${this.date}】).fontSize(20).backgroundColor(Color.Pink)Item({time: this.date}) // 必须初始化子组件的time字段Item({time: this.date}) // 必须初始化子组件的time字段Button(更新时间).onClick(() {this.date 时间 new Date().getTime();// 父组件的更改影响子组件})}.width(100%).height(100%).padding(10)}
}Component struct Item {Prop time: string; // 不允许本地初始化build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time 时间 new Date().getTime(); // 子组件的更改不影响父组件})}} 样例运行结果如下图所示
Link修饰符
Link 与 State 有相同的语义但初始化方式不同 Link 装饰的变量可以和父组件的 State 变量建立双向的数据绑定。即 Link 修饰的变量必须使用其父组件提供的 State 变量进行初始化允许组件内部修改 Link 变量值且更改会通知给父组件。 Link 状态数据具有以下特征
支持多种数据类型 Link 变量的值与 State 变量的类型相同即 class 、 number 、 string 、 boolean 或这些类型的数组。内部私有标记为 Link 的属性是私有变量只能在组件内访问。支持多个实例组件不同实例的内部状态数据独立。不支持内部初始化在创建组件的新实例时必须将值传递给 Link 修饰的变量进行初始化不支持在组件内部进行初始化。初始化使用 $ 符号例如$propertiesName。
样例如下
Entry Component struct ComponentTest {State date: string 时间 new Date().getTime(); // 定义State变量build() {Column({space: 10}) {Text(父组件【${this.date}】).fontSize(20).backgroundColor(Color.Pink)Item({time: $date}) // 初始化子组件time属性使用$符号Item({time: $date}) // 初始化子组件time属性使用$符号Button(更新时间).onClick(() {this.date 时间 new Date().getTime(); // 变更date子组件的对应属性也变化})}.width(100%).height(100%).padding(10)}
}Component struct Item {Link time: string;build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time 时间 new Date().getTime(); // 变更time父组件的对应属性也变化})}
}
样例运行结果如下图所示 StorageLink修饰符
StorageLink(key) 装饰的变量是组件内部的状态数据当这些状态数据被修改时将会调用所在组件的 build() 方法进行UI刷新。组件通过使用 StorageLink(key) 装饰的状态变量与 AppStorage 建立双向数据绑定。当创建包含 StorageLink 的状态变量的组件时该状态变量的值将使用 AppStorage 中的值进行初始化在UI组件中对 StorageLink 的状态变量所做的更改将同步到 AppStorage 并从 AppStorage 同步到任何其他绑定实例中如 PersistentStorage 或其他绑定的UI组件。 StorageLink 状态数据具有以下特征 支持多种数据类型支持的数据类型和 State 一致且支持 object 。 需要本地初始化必须为所有 StorageLink 变量分配初始值。 数据状态全局化使用 StorageLink 修饰的数据变化后全局都会改变。 数据持久化通过搭配 PersistentStorage 接口实现数据持久化。 绑定数据 简单样例如下所示 Entry Component struct ComponentTest {StorageLink(time) time: string 1648643734154;// 使用StorageLink标记并初始化build() {Column({space: 10}) {Text(父组件【${this.time}】) // 使用time值.fontSize(20).backgroundColor(Color.Pink)Button(更新时间).onClick(() {this.time new Date().getTime().toString();// 更改time的值})}.width(100%).height(100%).padding(10)}
}
运行结果如下图所示 - **双向绑定数据**简单样例如下所示Entry Component struct ComponentTest {StorageLink(time) time1: string 1648643734154;StorageLink(time) time2: string abcdefefwefwewee;build() {Column({space: 10}) {Text(父组件【${this.time1}】).fontSize(20).backgroundColor(Color.Pink)Item();Item();Button(更新时间).onClick(() {this.time2 new Date().getTime().toString();})}.width(100%).height(100%).padding(10)}}Component struct Item {StorageLink(time) time: string OpenHarmony;build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time new Date().getTime().toString();})}}
运行结果如下图所示 页面间数据绑定
简单样例如下图所示 // 第一个页面Entry Component struct ComponentTest {StorageLink(time) time1: string 1648643734154;// 应用key的值以首次初始化的值为准StorageLink(time) time2: string abcdefefwefwewee;// time2以time1的值为准build() {Column({space: 10}) {Text(父组件【${this.time1}】).fontSize(20).backgroundColor(Color.Pink)Item();// 使用自定义组件Item();// 使用自定义组件Button(更新时间).onClick(() {this.time2 new Date().getTime().toString();// 更改time2的值所有使用key的页面都会刷新})Button(跨页面数据绑定).onClick(() {router.push({uri: pages/test/setting})// 打开第二个页面})}.width(100%).height(100%).padding(10)}}// 自定义个组件Component struct Item {StorageLink(time) time: string OpenHarmony;// time的值以key第一次出现的初始化为准build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time new Date().getTime().toString();// 更改time的值所有使用key的页面都会刷新})}}// 第二个页面Entry Component struct Setting {StorageLink(time) tips: string 我是第二个页面; // tips的值以key第一次出现的为准build() {Column({space: 10}) {Text(this.tips) // tips的值以key第一次出现的为准.fontSize(20).margin(20).onClick(() {this.tips 0000000000000 // 更改tips的值所有使用key的页面都会更新})Button(返回).onClick(() {router.back()// 点击返回首页的数据会更改})}.width(100%).height(100%)}}
运行结果如下图所示 持久化数据
StorageLink 搭配 PersistentStorage 接口可以实现数据本地持久化简单样例如下图所示 // 持久化存储key并设置默认值PersistentStorage.PersistProp(time, Hello, OpenHarmony)Entry Component struct ComponentTest {// 初始化time1如果AppStorageStorageLink(time) time1: string 1648643734154;StorageLink(time) time2: string OpenHarmony;build() {Column({space: 10}) {Text(父组件【${this.time1}】).fontSize(20).backgroundColor(Color.Pink)Item();Item();Button(更新时间).onClick(() {this.time2 new Date().getTime().toString();})Button(跨页面数据绑定).onClick(() {router.push({uri: pages/test/setting})})}.width(100%).height(100%).padding(10)}}// 自定义组件Component struct Item {StorageLink(time) time: string OpenHarmony;build() {Text(子组件【${this.time}】).fontSize(20).backgroundColor(Color.Grey).onClick(() {this.time new Date().getTime().toString();})}}
运行结果如下图所示 Watch修饰符
Watch 用来监听状态变量的变化当它修饰的状态变量发生变更时回调相应的方式语法结构为
State Watch(function_name) count : number 0;
上述语句表示给状态变量 count 增加一个 Watch 装饰器通过 Watch 注册一个回调方法 function_name 当状态变量 count 被改变时 触发 function_name 回调。
简单样例如下所示
Entry Component struct WatchTest {State Watch(onBasketUpdated) shopBasket: Arraynumber [7, 12, 47, 3];State totalPurchase: number 0;updateTotal(): number {let sum 0;this.shopBasket.forEach((i) {sum i;});// 计算新的购物篮总价值如果超过100RMB则适用折扣this.totalPurchase (sum 100) ? sum : 0.9 * sum;return this.totalPurchase;}onBasketUpdated(propName: string): void {this.updateTotal();}build() {Column({space: 10}) {Text(${this.totalPurchase}).fontSize(30)Button(add to basket).onClick(() {this.shopBasket.push(Math.round(100 * Math.random()))})}.width(100%).height(100%).padding(10)}
}
样例运行结果如下图所示 集合 shopBasket 是一个状态变量它被 Watch 修饰符修饰并绑定了 onBasketUpdated() 方法回调当点击按钮往 shopBasket 里添加数据时会触发 onBasketUpdated() 方法的调用该方法里边执行了 totalPurchase 的数据计算最后页面刷新。
Watch 装饰器只能监听 State 、 Prop 、 Link 、 ObjectLink 、 Provide 、 Consume 、 StorageProp 以及 StorageLink 装饰的变量。
小结
通过对ArkUI三种状态管理的介绍可以根据具体的业务场景选择不同的状态管理模式。
鸿蒙开发岗位需要掌握那些核心要领
目前还有很多小伙伴不知道要学习哪些鸿蒙技术不知道重点掌握哪些为了避免学习时频繁踩坑最终浪费大量时间的。
自己学习时必须要有一份实用的鸿蒙Harmony NEXT资料非常有必要。 这里我推荐根据鸿蒙开发官网梳理与华为内部人员的分享总结出的开发文档。内容包含了【ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战】等技术知识点。
废话就不多说了接下来好好看下这份资料。
如果你是一名Android、Java、前端等等开发人员想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。鸿蒙OpenHarmony知识←前往。下面是鸿蒙开发的学习路线图。 针对鸿蒙成长路线打造的鸿蒙学习文档。鸿蒙OpenHarmony 学习手册共计1236页与鸿蒙OpenHarmony 开发入门教学视频帮助大家在技术的道路上更进一步。
其中内容包含
《鸿蒙开发基础》鸿蒙OpenHarmony知识←前往
ArkTS语言安装DevEco Studio运用你的第一个ArkTS应用ArkUI声明式UI开发.……
《鸿蒙开发进阶》鸿蒙OpenHarmony知识←前往
Stage模型入门网络管理数据管理电话服务分布式应用开发通知与窗口管理多媒体技术安全技能任务管理WebGL国际化开发应用测试DFX面向未来设计鸿蒙系统移植和裁剪定制……
《鸿蒙开发实战》鸿蒙OpenHarmony知识←前往
ArkTS实践UIAbility应用网络案例……
最后
鸿蒙是完全具备无与伦比的机遇和潜力的预计到年底将有 5,000 款的应用完成原生鸿蒙开发这么多的应用需要开发也就意味着需要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来爆发式的增长学习鸿蒙势在必行
