做民俗酒店到哪些网站推荐,专业网站建设设计服务,WordPress node,百通互联网站建设一、状态管理
1.在声明式UI中#xff0c;是以状态驱动视图更新#xff1a;
①状态#xff08;State#xff09;:指驱动视图更新的数据#xff08;被装饰器标记的变量#xff09;
②视图#xff08;View#xff09;:基于UI描述渲染得到用户界面
注意#xff1a;
①…一、状态管理
1.在声明式UI中是以状态驱动视图更新
①状态State:指驱动视图更新的数据被装饰器标记的变量
②视图View:基于UI描述渲染得到用户界面
注意
①State装饰器标记的变量必须初始化不能为空值
②State支持object、class、string、number、boolean、enum类型以及这些类型的数组
③嵌套类型以及数组中的对象属性无法触发视图更新
例子
class Person{name:stringage:numberfriend:Personconstructor(name:string,age:number,friend?:Person) {this.namenamethis.ageagethis.friendfriend}}Entry
Component
struct Index {State message: string Hello World
State P:Personnew Person(张三,18,new Person(zz,10))build() {Row() {Column() {// 正常发生变化Text(${this.P.name}:${this.P.age}).fontSize(80).fontWeight(FontWeight.Bold).fontColor(red).onClick((){this.P.name李四this.P.age})// 嵌套的对象点击视图不发生变化Text(${this.P.friend.name}:${this.P.friend.age}).fontSize(80).fontWeight(FontWeight.Bold).fontColor(red).onClick((){this.P.friend.namessthis.P.friend.age})}.width(100%)}.height(100%)}
}
效果 2.State和Prop单项数据同步父向子传值
①父组件 //2.引入子组件
import { AnLi }from ./AnLi
Entry
Component
struct Index {
// 1.父组件声明变量
State a:number0build() {Stack(){Column(){// 3.父向子传值AnLi({a:this.a})Button(点击).onClick((){this.a})}.height(30%).width(100%).backgroundColor(green)}.height(50%).width(100%).backgroundColor(red).alignContent(Alignment.Center)}}
②子组件
Component
export struct AnLi {//4.prop接收父组件传过来的变量
Prop a:numberbuild(){Column(){Text( ${this.a})}}}
2.State和Link数据双向同步
①父组件 //2.引入子组件
import { AnLi }from ./AnLi
Entry
Component
struct Index {
// 1.父组件声明变量
State a:number0build() {Stack(){Column(){Text( ${this.a})// 3.父向子传值AnLi({a:this.a})Button(点击).onClick((){this.a})}.height(30%).width(100%).backgroundColor(green)}.height(50%).width(100%).backgroundColor(red).alignContent(Alignment.Center)}}
②子组件
Component
export struct AnLi {//4.Link接收父组件传过来的变量
Link a:numberbuild(){Column(){Text( ${this.a})}}}
效果如下 3.Provide和Consume与后代组件双向同步例子如下
//入口组件根组件
import { AnLi }from ./AnLi
Entry
Component
struct Index {Provide a:number1build() {Stack(){Column(){AnLi()}.height(30%).width(100%).backgroundColor(green)}.height(50%).width(100%).backgroundColor(red).alignContent(Alignment.Center)}}//父组件
import { Consum }from ./Consum
Component
export struct AnLi {build(){Column(){Consum()}
}}//子组件
Component
export struct Consum {Consume a:numberbuild(){Column(){Text( ${this.a})Text( ${this.a})Button(加以).onClick((){this.a})}}}
效果如下 4.objectLink和observed装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步
被Observed装饰的类可以被观察到属性的变化子组件中ObjectLink装饰器装饰的状态变量用于接收Observed装饰的类的实例和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被Observed装饰的项或者是class object中的属性这个属性同样也需要被Observed装饰。单独使用Observed是没有任何作用的需要搭配ObjectLink或者Prop使用。
限制条件 使用Observed装饰class会改变class原始的原型链Observed和其他类装饰器装饰同一个class可能会带来问题。ObjectLink装饰器不能在Entry装饰的自定义组件中使用。
Observed
class ClassA {public c: number;constructor(c: number) {this.c c;}
}Observed
class ClassB {public a: ClassA;constructor(a: ClassA) {this.a a;}
}Component
struct ComB{ObjectLink a:ClassA;build(){Button(ViewA this.a.c${this.a.c} 1).onClick(() {this.a.c 1;})}
}Entry
Component
struct Index {State b: ClassB new ClassB(new ClassA(0));build() {Stack(){Column(){ComB({a:this.b.a})}.height(30%).width(100%).backgroundColor(green)}.height(50%).width(100%).backgroundColor(red).alignContent(Alignment.Center)}}
效果如下
