行业网站建设详解,电商品牌推广方案,wordpress登录界面修改,网页颜色搭配的推荐目录
一、简单类型的更新
二、class对象类型的变量 被该装饰器修饰的变量#xff0c;在数据变化时会触发UI的刷新#xff0c;也就是ArkTS UI中触发build()函数的调用#xff0c;重新根据状态构建UI。如下更新是可以观察到的#xff1a; 1、string number boolean 类型的数…
目录
一、简单类型的更新
二、class对象类型的变量 被该装饰器修饰的变量在数据变化时会触发UI的刷新也就是ArkTS UI中触发build()函数的调用重新根据状态构建UI。如下更新是可以观察到的 1、string number boolean 类型的数据可以被监听到更新。 2、class类型 可以观察到自身的赋值的变化和其属性赋值的变化嵌套属性的赋值观察不到。
一、简单类型的更新
Entry
Component
struct MyComponent {State count: number 0;build() {Button(click times: ${this.count}).onClick(() {this.count 1;})}
} 按钮Button绑定了一个点击事件当点击事件发生时State修饰的变量count会加1框架检测到状态变更然后查询依赖该变量的组件执行依赖该状态变量的组件的更新方法组件更新渲染而和该状态变量不相关的组件或者UI描述不会发生重新渲染从而实现页面渲染的按需更新。
二、class对象类型的变量
Entry
Component
struct StateDemoPage {private flag: boolean true;//string number boolean 类型的数据可以被监听到更新State index: number 0// class类型 可以观察到自身的赋值的变化和其属性赋值的变化State title: Model new Model(Hello, new ClassA(World));/*** 1 数组自身的赋值可以观察到。* 2 数组项的赋值可以观察到。* 3 删除数组项可以观察到。* 4 新增数组项可以观察到。* 5 数组项中属性的赋值观察不到。X*/State array: Model[] [new Model(a, new ClassA(xx)), new Model(b, new ClassA(yy))]build() {Row() {Column({ space: 12 }) {Text(${this.index}).stateTextStyle(() {this.index})Text(${this.title.key}-${this.title.value.subtitle}).stateTextStyle(() {if (this.flag) {this.title new Model(World, new ClassA(Hello))} else {this.title.key World Change}this.flag !this.flag// 嵌套的属性赋值观察不到// this.title.name.value ArkUI})ForEach(this.array, (item: Model, index) {Row() {Text(item.key).width(40%).fontSize(24).backgroundColor(Color.Orange)Text(item.value.subtitle).width(40%).fontSize(24).fontColor(Color.Red).backgroundColor(Color.Blue)}.backgroundColor(#8067c8ff).transition({ type: TransitionType.All, translate: {x: 200, y: 40} })}, item JSON.stringify(item))Button(ClickMe).backgroundColor(#67c8ff).fontColor(Color.White).borderRadius(12).height(44).padding({ left: 24, right: 24 }).onClick(() {animateTo({}, () {// this.array [new Model(dd, new ClassA(zz)), new Model(mm, new ClassA(z1z1))]// this.array[0] new Model(AA, new ClassA(xx))// this.array.unshift(new Model(AA, new ClassA(xx))) //头部插入// this.array.shift()//头部删除// this.array.push(new Model(AA, new ClassA(xx))) //尾部插入// this.array.pop()//尾部删除//元素中属性的赋值不能被观察到[所与可被观察到的属性一起使用的话也可以被观察到]this.array[0].value.subtitle Nested action})})}.width(100%)}.height(100%)}
}export class ClassA {public subtitle: string;constructor(value: string) {this.subtitle value;}
}export class Model {public key: string;public value: ClassA;constructor(key: string, value: ClassA) {this.key key;this.value value;}
} 上例中演示了以下几种情况
数组自身的赋值可以观察到。
this.array [new Model(dd, new ClassA(zz)), new Model(mm, new ClassA(z1z1))]
数组项的赋值可以观察到。
this.array[0] new Model(AA, new ClassA(xx))删除数组项可以观察到。
this.array.shift()//头部删除
this.array.pop()//尾部删除新增数组项可以观察到。
this.array.unshift(new Model(AA, new ClassA(xx))) //头部插入
this.array.push(new Model(AA, new ClassA(xx))) //尾部插入
数组项中属性的赋值观察不到。X 此情况需要说明下如果单独像下面这样更新数据时框架是不是检测到数据变化的也就不会触发UI刷新
this.array[0].value.subtitle Nested action 但是但是但是当与其他可被观察到的行为一起更新数据时也是能正确刷新的到UI上的呢可被观察的行为能触发UI更新UI更新时会把相关联的数据都用上所以能更新到UI上。
