网页安全站点设置,自己做网站兼职,百度推广费用一年多少钱,泰安人才网公司移动端开发#xff0c;最重要的一点就是数据的处理#xff0c;并且正确的显示渲染UI。 变量在页面和组件、组件和组件之间有时候并不能实时共享#xff0c;而有时候#xff0c;又不需要太多的作用域#xff08;节省资源#xff09;#xff0c;作用就需要根据不同场景最重要的一点就是数据的处理并且正确的显示渲染UI。 变量在页面和组件、组件和组件之间有时候并不能实时共享而有时候又不需要太多的作用域节省资源作用就需要根据不同场景设置不同状态的变量。 官方文档
一、状态管理概述
在声明式UI编程框架中UI是程序状态的运行结果用户构建了一个UI模型其中应用的运行时的状态是参数。当参数改变时UI作为返回结果也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染在ArkUI中统称为状态管理机制。
简单理解就是当变量改变时相关的UI也能跟着改变为达到这个目的引入了状态变量
自定义组件拥有变量变量必须被装饰器装饰才可以成为状态变量状态变量的改变会引起UI的渲染刷新。如果不使用状态变量UI只能在初始化时渲染后续将不会再刷新。 下图展示了State和ViewUI之间的关系。 因为
常规变量没有状态的变量通常应用于辅助计算。它的改变永远不会引起UI的刷新。所以引入状态变量
状态变量被状态装饰器装饰的变量改变会引起UI的渲染更新。State状态一般指的是装饰器装饰的数据。用户通过触发组件的事件方法改变状态数据。状态数据的改变引起UI的重新渲染。
二、 状态管理总览 管理应用拥有的状态
1.管理组件拥有的状态
Components级别的状态管理
装饰器描述StateState装饰的变量拥有其所属组件的状态可以作为其子组件单向和双向同步的数据源。当其数值改变时会引起相关组件的渲染刷新。PropProp装饰的变量可以和父组件建立单向同步关系Prop装饰的变量是可变的但修改不会同步回父组件。LinkLink装饰的变量和父组件构建双向同步关系的状态变量父组件会接受来自Link装饰的变量的修改的同步父组件的更新也会同步给Link装饰的变量。Provide/ConsumeProvide/Consume装饰的变量用于跨组件层级多层组件同步状态变量可以不需要通过参数命名机制传递通过alias别名或者属性名绑定。ObservedObserved装饰class需要观察多层嵌套场景的class需要被Observed装饰。单独使用Observed没有任何作用需要和ObjectLink、Prop连用。ObjectLinkObjectLink装饰的变量接收Observed装饰的class的实例应用于观察多层嵌套场景和父组件的数据源构建双向同步。
2.管理应用拥有的状态
AppStorage是应用程序中的一个特殊的单例LocalStorage对象是应用级的数据库和进程绑定通过StorageProp和StorageLink装饰器可以和组件联动。AppStorage是应用状态的“中枢”需要和组件UI交互的数据存入AppStorage比如持久化数据PersistentStorage和环境变量Environment。UI再通过AppStorage提供的装饰器或者API接口访问这些数据框架还提供了LocalStorageAppStorage是LocalStorage特殊的单例。LocalStorage是应用程序声明的应用状态的内存“数据库”通常用于页面级的状态共享通过LocalStorageProp和LocalStorageLink装饰器可以和UI联动。
三、状态介绍
1、State装饰器组件内状态
State装饰器组件内状态
示例
Entry
Component
struct MyComponent {State count: number 0;build() {Button(click times: ${this.count}).onClick(() {this.count 1;})}
}2、Prop装饰器父子单向同步
Prop装饰器父子单向同步
示例
Prop customCounter没有本地初始化所以需要父组件提供数据源去初始化Prop并当父组件的数据源变化时Prop也将被更新Prop customCounter2有本地初始化在这种情况下Prop依旧允许但非强制父组件同步数据源给Prop。
Component
struct MyComponent {Prop customCounter: number;Prop customCounter2: number 5;build() {Column() {Row() {Text(From Main: ${this.customCounter}).width(90).height(40).fontColor(#FF0010)}Row() {Button(Click to change locally !).width(180).height(60).margin({ top: 10 }).onClick(() {this.customCounter2})}.height(100).width(180)Row() {Text(Custom Local: ${this.customCounter2}).width(90).height(40).fontColor(#FF0010)}}}
}
Entry
Component
struct MainProgram {State mainCounter: number 10;build() {Column() {Row() {Column() {Button(Click to change number).width(480).height(60).margin({ top: 10, bottom: 10 }).onClick(() {this.mainCounter})}}Row() {Column()// customCounter必须从父组件初始化因为MyComponent的customCounter成员变量缺少本地初始化此处customCounter2可以不做初始化。MyComponent({ customCounter: this.mainCounter })// customCounter2也可以从父组件初始化父组件初始化的值会覆盖子组件customCounter2的本地初始化的值MyComponent({ customCounter: this.mainCounter, customCounter2: this.mainCounter })}}}
}3、Link装饰器父子双向同步
Link装饰器父子双向同步
示例解释 父组件定了了两个变量State greenButtonStateState yellowButtonProp传递给子组件子组件使用Link装饰器关联当这两个变量在父组件改变时子组件里面的值也跟着改变从而改变UI同时由于Link的关系这两个参数在子组件里面改变了也会夫组件里的变量也会跟着改变
class GreenButtonState {width: number 0;constructor(width: number) {this.width width;}
}
Component
struct GreenButton {Link greenButtonState: GreenButtonState;build() {Button(Green Button).width(this.greenButtonState.width).height(150.0).backgroundColor(#00ff00).onClick(() {if (this.greenButtonState.width 700) {// 更新class的属性变化可以被观察到同步回父组件this.greenButtonState.width 125;} else {// 更新class变化可以被观察到同步回父组件this.greenButtonState new GreenButtonState(100);}})}
}
Component
struct YellowButton {Link yellowButtonState: number;build() {Button(Yellow Button).width(this.yellowButtonState).height(150.0).backgroundColor(#ffff00).onClick(() {// 子组件的简单类型可以同步回父组件this.yellowButtonState 50.0;})}
}
Entry
Component
struct ShufflingContainer {State greenButtonState: GreenButtonState new GreenButtonState(300);State yellowButtonProp: number 100;build() {Column() {// 简单类型从父组件State向子组件Link数据同步Button(Parent View: Set yellowButton).onClick(() {this.yellowButtonProp (this.yellowButtonProp 700) ? this.yellowButtonProp 100 : 100;})// class类型从父组件State向子组件Link数据同步Button(Parent View: Set GreenButton).onClick(() {this.greenButtonState.width (this.greenButtonState.width 700) ? this.greenButtonState.width 100 : 100;})// class类型初始化LinkGreenButton({ greenButtonState: $greenButtonState })// 简单类型初始化LinkYellowButton({ yellowButtonState: $yellowButtonProp })}}
}4、Provide装饰器和Consume装饰器与后代组件双向同步
Provide装饰器和Consume装饰器与后代组件双向同步
示例 在下面的示例是与后代组件双向同步状态Provide和Consume场景。当分别点击CompA和CompD组件内Button时reviewVotes 的更改会双向同步在CompA和CompD中。
Component
struct CompD {// Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的Provide装饰的变量Consume reviewVotes: number;build() {Column() {Text(reviewVotes(${this.reviewVotes}))Button(reviewVotes(${this.reviewVotes}), give 1).onClick(() this.reviewVotes 1)}.width(50%)}
}
Component
struct CompC {build() {Row({ space: 5 }) {CompD()CompD()}}
}
Component
struct CompB {build() {CompC()}
}
Entry
Component
struct CompA {// Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件Provide reviewVotes: number 0;build() {Column() {Button(reviewVotes(${this.reviewVotes}), give 1).onClick(() this.reviewVotes 1)CompB()}}
}5、Observed装饰器和ObjectLink装饰器嵌套类对象属性变化
Observed装饰器和ObjectLink装饰器嵌套类对象属性变化
6、LocalStorage页面级UI状态存储
LocalStorage页面级UI状态存储
7、AppStorage应用全局的UI状态存储
AppStorage应用全局的UI状态存储
8、PersistentStorage持久化存储UI状态
PersistentStorage持久化存储UI状态
9、Environment设备环境查询
Environment设备环境查询
10、Watch装饰器状态变量更改通知
Watch装饰器状态变量更改通知
11、$$语法内置组件双向同步
$$语法内置组件双向同步
