鸿蒙原生开辟之状态管理V2
一、ArkTS状态变量的界说：[*] State：状态，指驱动UI更新的数据。用户通过触发组件的变乱方法，改变状态数据。状态数据的改变，引起UI的重新渲染。
在鸿蒙原生开辟中，利用ArkTS开辟UI的时间，我们可以对UI进行状态变量的绑定，来进行UI渲染
https://i-blog.csdnimg.cn/direct/c20e6ba581fa4b428de459cb91ff7abd.png
根本结构如下：
@Component<br />struct MyComponent {<br />@State count: number = 0;<br />private increaseBy: number = 1;<br /><br />build() {<br />}<br />}<br /><br />@Entry<br />@Component<br />struct Parent {<br />build() {<br /> Column() {<br /> // 从父组件初始化，覆盖本地定义的默认值<br /> MyComponent({ count: 1, increaseBy: 2 })<br /> }<br />}<br />}
@State count: number = 0;//通过@State修饰绑定的变量会被UI监听，count发生变化时UI也会随之变化。
这是V1的状态管理方法。
下面我们来介绍V2状态管理
首先我们来看V2的状态修饰器：
[*]@ObservedV2装饰器和@Trace装饰器：类属性变化观测
[*]@ComponentV2装饰器：自界说组件
[*]@Local装饰器：组件内部状态
[*]@Param：组件外部输入
[*]@Once：初始化同步一次
[*]@Event装饰器：规范组件输出
[*]@Provider装饰器和@Consumer装饰器：跨组件层级双向同步
[*]@Monitor装饰器：状态变量修改监听
[*]@Computed装饰器：计算属性
[*]@Type装饰器：标记类属性的类型
@ObservedV2装饰器与@Trace装饰器
[*]@ObservedV2装饰器与@Trace装饰器需要配合利用，单独利用@ObservedV2装饰器或@Trace装饰器没有任何作用。
[*]被@Trace装饰器装饰的属性property变化时，仅会关照property关联的组件进行革新。
[*]在嵌套类中，嵌套类中的属性property被@Trace装饰且嵌套类被@ObservedV2装饰时，才具有触发UI革新的能力。
[*]在继续类中，父类或子类中的属性property被@Trace装饰且该property地点类被@ObservedV2装饰时，才具有触发UI革新的能力。
[*]未被@Trace装饰的属性用在UI中无法感知到变化，也无法触发UI革新。
[*]@ObservedV2的类实例目前不支持利用JSON.stringify进行序列化。
@ComponentV2装饰器用于装饰自界说组件：
[*] 在@ComponentV2装饰的自界说组件中，开辟者仅可以利用全新的状态变量装饰器，包罗@Local、@Param、@Once、@Event、@Provider、@Consumer等。
[*] @ComponentV2装饰的自界说组件暂不支持组件复用、LocalStorage等现有自界说组件的能力。
[*] 无法同时利用@ComponentV2与@Component装饰同一个struct结构。
[*] @ComponentV2支持一个可选的boolean类型参数freezeWhenInactive，来实现组件冻结功能。
@ComponentV2 // 装饰器<br />struct Index { // struct声明的数据结构<br />build() { // build定义的UI<br />}<br />}
通过以上状态变量的修饰，可以弥补状态管理（V1）的短板，状态管理（V1）在复杂数据类型和隔代数据同步方面可能没有状态管理（V2）更好用，以是我们大型复杂数据结构的项目可以利用状态管理（V2），在日常平凡项目中利用状态管理（V1）更方便。
最后我们来看看MVVM模式的状态管理V2项目框架计划
一般鸿蒙项目的开辟利用MVVM模式；ArkUI采用了Model-View-ViewModel（MVVM）架构模式，
MVVM将应用分为Model、View和ViewModel三个核心部分，实现数据、视图与逻辑的分离。通过这种模式，UI可以随着状态的变化自动更新，无需手动处理惩罚，从而更加高效地管理数据和视图的绑定与更新。
[*]Model：负责存储和管理应用的数据以及业务逻辑，不直接与用户界面交互。通常从后端接口获取数据，是应用步伐的数据基础，确保数据的同等性和完整性。
[*]View：负责用户界面展示数据并与用户交互，不包罗任何业务逻辑。它通过绑定ViewModel层提供的数据来动态更新UI。
[*]ViewModel：负责管理UI状态和交互逻辑。作为毗连Model和View的桥梁，ViewModel监控Model数据的变化，关照View更新UI，同时处理惩罚用户交互变乱并转换为数据操纵。
常用的状态管理装饰器包罗@Local、@Param、@Event、@ObservedV2、@Trace
来看这段代码：
@ObservedV2<br />export default class TaskListTeamBean {<br />@Type(TeamBean)<br />@Trace login: TeamBean[] = ;<br />@Type(TeamBean)<br />@Trace bill: TeamBean[] = ;<br />@Type(TeamBean)<br />@Trace community: TeamBean[] = ;<br />@Type(TeamBean)<br />@Trace game: TeamBean[] = ;<br />@Type(TeamBean)<br />@Trace person: TeamBean[] = ;<br /><br />async loadTasks(context: common.UIAbilityContext) {<br /> let taskList = new ListTeamBean(new WholeBean());<br /> await taskList.loadTasks(context);<br /> this.login = taskList.taskWhole.login<br /> this.bill = taskList.taskWhole.bill<br /> this.community = taskList.taskWhole.community<br /> this.game = taskList.taskWhole.game<br /> this.person = taskList.taskWhole.person<br />}<br /><br /><br />addTask(newTask: TaskTeamBean): void {<br /><br />}<br /><br />removeTask(removedTask: TaskTeamBean): void {<br /><br />}<br />}
@Local taskList: TaskListTeamBean = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;<br /> <br />private context = getContext(this) as common.UIAbilityContext;<br /><br /><br />async aboutToAppear() {<br /> this.taskList = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;<br /> if (this.taskList.community.length < 2) {<br /> await this.taskList.loadTasks(this.context);<br /> }<br />}
通过
[*]@ComponentV2修饰TaskListTeamBean数据对象
[*]在TaskListTeamBean内部利用@Type()@Trace来修饰变量
[*]然后再在@Entry入口页面调用：
这就是MVVM模式+状态管理V2的根本框架开辟模式。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]