网站网站是否需要备案,备案后修改网站内容,界面设计包括哪三个方面,房山区做网站系列文章目录
1.HarmonyOS | 状态管理(一) | State装饰器 文章目录 系列文章目录前言一、Prop装饰器是什么#xff1f;二、限制条件三、使用场景父组件State到子组件Prop简单数据类型同步从父组件中的State类对象属性到Prop简单类型的同步 前言
通过上一篇 HarmonyOS | 状态…系列文章目录
1.HarmonyOS | 状态管理(一) | State装饰器 文章目录 系列文章目录前言一、Prop装饰器是什么二、限制条件三、使用场景父组件State到子组件Prop简单数据类型同步从父组件中的State类对象属性到Prop简单类型的同步 前言
通过上一篇 HarmonyOS | 状态管理(一) | State装饰器 的学习大概了解状态管理的知识本篇讲解 Prop装饰器(父子单向同步) 一、Prop装饰器是什么 Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的但是变化不会同步回其父组件。 二、限制条件 Prop装饰器不能在Entry装饰的自定义组件中使用 三、使用场景
父组件State到子组件Prop简单数据类型同步
Entry
Component
struct ParentComponent {State countDownStartValue: number 10;build() {Column(){Text(Grant ${this.countDownStartValue} nuggets to play.)Button(1 - Nuggets in New Game).onClick((){this.countDownStartValue 1;}).margin(10)Button(-1 - Nuggets in New Game).onClick((){this.countDownStartValue - 1;}).margin(10)CountDownComponent({count:this.countDownStartValue,costOfOneAttempt:2})}}
}Component
struct CountDownComponent {Prop count:number;costOfOneAttempt:number 1;build() {Column() {if (this.count 0) {Text(You have ${this.count} Nuggets left)} else {Text(Game over!)}// Prop装饰的变量不会同步给父组件Button(Try again).onClick(() {this.count - this.costOfOneAttempt;}).margin(10)}}
}在上面的示例中 CountDownComponent子组件首次创建时其Prop装饰的count变量将从父组件State装饰的countDownStartValue变量初始化 按“1”或“-1”按钮时父组件的State装饰的countDownStartValue值会变化这将触发父组件重新渲染在父组件重新渲染过程中会刷新使用countDownStartValue状态变量的UI组件并单向同步更新CountDownComponent子组件中的count值 更新count状态变量值也会触发CountDownComponent的重新渲染在重新渲染过程中评估使用count状态变量的if语句条件this.count 0并执行true分支中的使用count状态变量的UI组件相关描述来更新Text组件的UI显示 当按下子组件CountDownComponent的“Try again”按钮时其Prop变量count将被更改但是count值的更改不会影响父组件的countDownStartValue值 父组件的countDownStartValue值会变化时父组件的修改将覆盖掉子组件CountDownComponent中count本地的修改。
从父组件中的State类对象属性到Prop简单类型的同步
如果图书馆有一本图书和两位用户每位用户都可以将图书标记为已读此标记行为不会影响其它读者用户。从代码角度讲对Prop图书对象的本地更改不会同步给图书馆组件中的State图书对象。
class Book {public title: string;public pages: number;public readIt: boolean false;constructor(title: string, pages: number) {this.title title;this.pages pages;}
}Component
struct ReaderComp {Prop title: string;Prop readIt: boolean;build() {Row() {Text(this.title)Text(... ${this.readIt ? I have read : I have not read it}).onClick(() this.readIt true)}}
}Entry
Component
struct Library {State book: Book new Book(100 secrets of C, 765);build() {Column() {ReaderComp({ title: this.book.title, readIt: this.book.readIt })ReaderComp({ title: this.book.title, readIt: this.book.readIt })}}
}
