贵州做网站找谁,手机网站域名哪里注册时间,网页设计与制作的模板,好分销系统平台大家好#xff0c;这里是鸿蒙开天组#xff0c;今天我们来学习一下状态管理中的Provide与Consume。
一、概述
嘿#xff01;大家还记得这张图吗#xff1f;不记得也要记得哦#xff0c;因为这张图里的东西#xff0c;既是高频必考面试题#xff0c;也是实际开发中这里是鸿蒙开天组今天我们来学习一下状态管理中的Provide与Consume。
一、概述
嘿大家还记得这张图吗不记得也要记得哦因为这张图里的东西既是高频必考面试题也是实际开发中经常需要用到的玩意大致上可以这么理解
下面Components框起来的部分就是组件之间的状态变量的管理也就是数据通讯它会涉及到组件之间的关系比如父子关系比如祖孙关系或者其他跨级关系等等。 昨天我们已经学习了左下角的Prop和Link今天需要学的就在中间位置 Provide/Consume装饰的变量用于跨组件层级多层组件同步状态变量。
二、基础使用
先附上官方文档链接Provide装饰器和Consume装饰器
官方文档写的东西比较多对于新手来说不太容易理解消化和抓住重点所以我们这里提供了基础结构
// 写法 1通过相同的变量名绑定
Provide a: number 0;
Consume a: number;// 写法 2通过相同的变量别名绑定
Provide b: number 0;
Consume(b) c: number;
简单来说使用步骤就是
将爷组件的状态属性使用Provide修饰孙组件通过Consume修饰 三、例子说明
这里按步骤一步步来先给出基础代码模板大家理解一下其中的结构
Entry
Component// 爷级组件
struct GrandfatherComponent {build() {Column() {Text(爷级组件).fontSize(30).fontWeight(900)ParentComponent()}.padding(10).height(100%).backgroundColor(Color.Gray).width(100%).alignItems(HorizontalAlign.Center).padding({ top: 100 })}
}Component// 父级组件
struct ParentComponent {// 编写 UIbuild() {Column({ space: 20 }) {Text(我是父级组件).fontSize(22).fontWeight(900)GrandsonComponent()}.backgroundColor(Color.Pink).alignItems(HorizontalAlign.Center).width(90%).margin({ top: 50 }).padding(10).borderRadius(10)}
}Component// 孙级组件
struct GrandsonComponent {// 编写 UIbuild() {Column({ space: 20 }) {Text(我是孙级组件).fontSize(20).fontWeight(900)}.backgroundColor(Color.Orange).alignItems(HorizontalAlign.Center).width(90%).margin({ top: 50 }).padding(10).borderRadius(10)}
}
界面显示如下 现在的需求是爷级组件和孙级组件通信传值问题是从代码结构上看中间还隔了一个父级组件。虽然我们也可以基于上一篇讲的StateProp从爷-父-孙这样实现但是管理起来毕竟有一个中间商不那么方便而且这也是华为官方不推荐的做法因为会消耗额外的性能。所以我们采用了ProvideConsume的方式来实现
interface Cat {name: stringage: number
}Entry
Component// 爷级组件
struct GrandfatherComponent {Provide cat: Cat { name: 小花, age: 3 }Provide food: string fishbuild() {Column() {Text(爷级组件).fontSize(30).fontWeight(900)ParentComponent()}.padding(10).height(100%).backgroundColor(Color.Gray).width(100%).alignItems(HorizontalAlign.Center).padding({ top: 100 })}
}Component// 父级组件
struct ParentComponent {// 编写 UIbuild() {Column({ space: 20 }) {Text(我是父级组件).fontSize(22).fontWeight(900)GrandsonComponent()}.backgroundColor(Color.Pink).alignItems(HorizontalAlign.Center).width(90%).margin({ top: 50 }).padding(10).borderRadius(10)}
}Component// 孙级组件
struct GrandsonComponent {// 相同变量名Consume cat: CatConsume(food) f: string// 编写 UIbuild() {Column({ space: 20 }) {Text(我是孙级组件).fontSize(20).fontWeight(900)Text(JSON.stringify(this.cat))Text(this.f)Button(修改).onClick(() {this.cat.name 小美this.cat.age 99this.f })}.backgroundColor(Color.Orange).alignItems(HorizontalAlign.Center).width(90%).margin({ top: 50 }).padding(10).borderRadius(10)}
}
点击修改效果如下 四、补充
1.ProvideConsume也是开发中很常用的一对尤其是组件跨级关系复杂的时候这个时候就只需要定义一个Provide在祖级组件中定义其他多个后代组件Consume接收即可
2.在build方法内当Provide与Consume装饰的变量是Object类型、且通过a.b(this.object)形式调用时b方法内传入的是this.object的原生对象修改其属性无法触发UI刷新尝试思考下以下例子该如何修改才能触发UI刷新吧参考答案在官方文档的最后
class Animal {name:string;type:string;age: number;constructor(name:string, type:string, age:number) {this.name name;this.type type;this.age age;}static changeName1(animal:Animal) {animal.name Black;}static changeAge1(animal:Animal) {animal.age 1;}
}Entry
Component
struct Demo1 {Provide dog:Animal new Animal(WangCai, dog, 2);changeAge2(animal:Animal) {animal.age 2;}build() {Column({ space:10 }) {Text(Demo1: This is a ${this.dog.age}-year-old ${this.dog.type} named ${this.dog.name}.).fontColor(Color.Red).fontSize(30)Button(changeAge1).onClick((){// 通过静态方法调用无法触发UI刷新Animal.changeAge1(this.dog);})Button(changeAge2).onClick((){// 使用this通过自定义组件内部方法调用无法触发UI刷新this.changeAge2(this.dog);})Demo2()}}
}Component
struct Demo2 {build() {Column({ space:10 }) {Text(Demo2.).fontColor(Color.Blue).fontSize(30)Demo3()}}
}Component
struct Demo3 {Consume dog:Animal;changeName2(animal:Animal) {animal.name White;}build() {Column({ space:10 }) {Text(Demo3: This is a ${this.dog.age}-year-old ${this.dog.type} named ${this.dog.name}.).fontColor(Color.Yellow).fontSize(30)Button(changeName1).onClick((){// 通过静态方法调用无法触发UI刷新Animal.changeName1(this.dog);})Button(changeName2).onClick((){// 使用this通过自定义组件内部方法调用无法触发UI刷新this.changeName2(this.dog);})}}
}
好啦今天的分享就到这里感谢阅读你的点赞和收藏都是莫大的支持
