鸿蒙原生开发之状态管理V2

news2025/3/31 23:41:13

一、ArkTS状态变量的定义:


  • State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。


在鸿蒙原生开发中,使用ArkTS开发UI的时候,我们可以对UI进行状态变量的绑定,来进行UI渲染



基本结构如下:


@Component
struct MyComponent {
@State count: number = 0;
private increaseBy: number = 1;

build() {
}
}

@Entry
@Component
struct Parent {
build() {
Column() {
// 从父组件初始化,覆盖本地定义的默认值
MyComponent({ count: 1, increaseBy: 2 })
}
}
}

@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 // 装饰器
struct Index { // struct声明的数据结构
build() { // build定义的UI
}
}


通过以上状态变量的修饰,可以弥补状态管理(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
export default class TaskListTeamBean {
@Type(TeamBean)
@Trace login: TeamBean[] = [new TeamBean()];
@Type(TeamBean)
@Trace bill: TeamBean[] = [new TeamBean()];
@Type(TeamBean)
@Trace community: TeamBean[] = [new TeamBean()];
@Type(TeamBean)
@Trace game: TeamBean[] = [new TeamBean()];
@Type(TeamBean)
@Trace person: TeamBean[] = [new TeamBean()];

async loadTasks(context: common.UIAbilityContext) {
let taskList = new ListTeamBean(new WholeBean());
await taskList.loadTasks(context);
this.login = taskList.taskWhole.login
this.bill = taskList.taskWhole.bill
this.community = taskList.taskWhole.community
this.game = taskList.taskWhole.game
this.person = taskList.taskWhole.person
}


addTask(newTask: TaskTeamBean): void {

}

removeTask(removedTask: TaskTeamBean): void {

}
}

@Local taskList: TaskListTeamBean = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;

private context = getContext(this) as common.UIAbilityContext;


async aboutToAppear() {
this.taskList = PersistenceV2.connect(TaskListTeamBean, 'TaskList', () => new TaskListTeamBean())!;
if (this.taskList.community.length < 2) {
await this.taskList.loadTasks(this.context);
}
}

通过


  1. @ComponentV2修饰TaskListTeamBean数据对象
  2. 在TaskListTeamBean内部使用@Type()@Trace来修饰变量
  3. 然后再在@Entry入口页面调用:

这就是MVVM模式+状态管理V2的基本框架开发模式。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324635.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

矩阵中对角线的遍历问题【C++】

1&#xff0c;按对角线进行矩阵排序 题目链接&#xff1a;3446. 按对角线进行矩阵排序 - 力扣&#xff08;LeetCode&#xff09; 【题目描述】 对于一个m*n的矩阵grid&#xff0c;要求对该矩阵进行 变换&#xff0c;使得变换后的矩阵满足&#xff1a; 主对角线右上的所有对角…

[Lc4_dfs] 解数独 | 单词搜索

目录 1.解数独 题解 2.单词搜索 题解 1.解数独 链接&#xff1a;37. 解数独 编写一个程序&#xff0c;通过填充空格来解决数独问题。 数独的解法需 遵循如下规则&#xff1a; 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线…

day17 学习笔记

文章目录 前言一、数组的增删改查1.resize函数2.append函数3.insert函数4.delete函数5.argwhere函数6.unique函数 二、统计函数1.amax&#xff0c;amin函数2.ptp函数3.median函数4.mean函数5.average函数6.var&#xff0c;std函数 前言 通过今天的学习&#xff0c;我掌握了num…

自动语音识别(ASR)技术详解

语音识别&#xff08;Automatic Speech Recognition, ASR&#xff09;是人工智能和自然语言处理领域的重要技术&#xff0c;旨在将人类的语音信号转换为对应的文本。近年来&#xff0c;深度学习的突破推动语音识别系统从实验室走入日常生活&#xff0c;为智能助手、实时翻译、医…

git | 版本切换的相关指令

常见指令 git log --oneline #查看历史提交 git tag latest-backup # 对当前的提交进行标记&#xff0c;标记名为latest-backup git checkout -b old-version 55b16aa # 切换到[55b16aa]的提交中&#xff0c;并标记为[old-version]的分支 git checkout master …

19.OpenCV图像二值化

OpenCV图像二值化 图像二值化&#xff08;Binarization&#xff09;是图像预处理中的一种常用技术&#xff0c;其目的是将图像中的像素值分为两个类别——通常是“前景”和“背景”或者说0和255。二值化能够简化图像信息&#xff0c;为后续的形态学处理、边缘检测、目标识别等…

通过Appium理解MCP架构

MCP即Model Context Protocol&#xff08;模型上下文协议&#xff09;&#xff0c;是由Anthropic公司于2024年11月26日推出的开放标准框架&#xff0c;旨在为大型语言模型与外部数据源、工具及系统建立标准化交互协议&#xff0c;以打破AI与数据之间的连接壁垒。 MCP架构与Appi…

分享一个Pyside6实现web数据展示界面的效果图

今天又是有问题直接找DS的一天&#xff0c;每日一问&#xff0c;今天我的问题是“怎么将pyside6生成的界面转成web界面&#xff0c;使用python语言实现web界面”&#xff0c;等了一会&#xff0c;DS给我提供了两种方案&#xff0c;方案如下&#xff1a; 然后&#xff0c;让我们…

FALL靶场通关攻略

1&#xff0c;下载好靶机后打开&#xff0c;通过kali扫描靶机ip和端口&#xff0c;得到靶机ip为192.168.50.144 2&#xff0c;扫描目录 3&#xff0c;访问靶机 4&#xff0c;访问扫描到的test.php,得到缺少GET请求参数的提示 5&#xff0c;使用FUZZ来扫出参数为file 6&#xff…

Mybatis日志模块分析--适配器模式+代理模式

适配器模式 日志在我们开发过程中占据了一个非常重要的地位&#xff0c;是开发和运维管理之间的桥梁&#xff0c;在Java中的日志框架也非常多&#xff0c;Log4j,Log4j2,Apache Commons Log,java.util.logging,slf4j等&#xff0c;这些工具对外的接口也都不尽相同&#xff0c;为…

圆球法线图,图生法线图 图片生成法线图

目录 圆球法线图 根据图片生成法线图 深度图计算法线图 圆球法线图 import numpy as np import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D# 定义球体的参数 radius 1.0 resolution 100# 生成球体表面的点 u np.linspace(0, 2 * np.pi, resoluti…

Java基于SpringBoot的网络云端日记本系统,附源码+文档说明

博主介绍&#xff1a;✌Java老徐、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&…

【自用记录】本地关联GitHub以及遇到的问题

最近终于又想起GitHub&#xff0c;想上传代码和项目到仓库里。 由于很早之前有在本地连接过GitHub&#xff08;但没怎么用&#xff09;&#xff0c;现在需要重新搞起&#xff08;操作忘得差不多&#xff09;。 在看教程实操的过程中遇到了一些小问题&#xff0c;遂记录一下。 前…

页码设置相关问题记录

Q&#xff1a;中间没有显示页码怎么办&#xff1f; A&#xff1a;“页眉和页脚”-“页码”-“页面底端”-“普通数字2” Q&#xff1a;想让页码在某几节连续怎么办&#xff1f; A&#xff1a; ① 先保证节与节之间插入了“分节符”&#xff08;如何插入分节符和如何显示分节符…

什么是数据集市

数据集市&#xff08;Data Mart&#xff09;是数据管理领域的核心概念&#xff0c;其定义为面向特定业务领域或用户群体的小型数据仓库子集&#xff0c;专注于部门级业务分析&#xff0c;具有快速响应、灵活部署等特点。以下从定义、特点、类型、结构、应用场景及与其他数据架构…

【HC-05蓝牙模块】主要性能指标与通信基础知识

一、HC-05 基础学习视频 HC-05蓝牙串口通信模块调试与应用1 二、HC-05学习视频课件

如何缩短研发周期,降低研发成本?全星APQP软件为您提供解决方案

如何缩短研发周期&#xff0c;降低研发成本&#xff1f;全星APQP软件为您提供解决方案 一、 系统概述 全星研发管理APQP软件系统是一款专为产品研发和质量管控打造的智能化平台&#xff0c;旨在帮助企业高效推进APQP&#xff08;先期产品质量策划&#xff09;流程&#xff0c…

Github Webhook 以及主动式

Github配置 GitHub 默认支持两种 Content-Type: application/json application/x-www-form-urlencoded 特别要注意 Content-Type 我们选择: application/json Flask代码 import os import shutil import subprocess from flask import Flask, request, jsonifyapp = Fla…

猜猜我用的是哪个大模型?我的世界游戏界面简单的模拟效果

我的罗里吧嗦的&#xff0c;根据小朋友的要求&#xff0c;边听边写边输入的提示词&#xff1a; 请生成一段完整的在网页中用html5和javascript代码模拟“我的世界”中游戏场景的互动画面&#xff0c;要求提供若干人物选项可以选择&#xff0c;请自行选择需要使用哪些库或框架来…

基于龙芯3A5000处理器,全国产标准6U VPX板卡解决方案

1&#xff0c;产品功能 本产品为一款高可靠性的基于龙芯3A5000处理器以及 7A2000芯片组的标准6U VPX板卡&#xff0c;具有以太网、SATA、PCIE&#xff0c;以及显示等接口&#xff0c;产品功能框图如图1所示&#xff1a; 图1 系统框图 2&#xff0c;技术指标 序号 项目 指标…