HarmonyOS 状态管理(一)

news2024/11/27 7:29:02

1. HarmonyOS 状态管理

1.1. 说明

  官方文档(https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-state-management-V5)
在这里插入图片描述

1.1.1. 状态管理(V1稳定版)

  状态管理(V1稳定版)提供了多种装饰器,用于在组件级别管理状态 。这些装饰器包括:
  @State:用于声明组件的状态变量,可以作为其子组件的单向和双向同步数据源 。
  @Prop:用于建立组件与父组件的单向数据同步关系 。
  @Link:用于建立组件与父组件的双向数据同步关系 。
  @Observed:用于观察多层嵌套的变化。
  @ObjectLink:用于观察嵌套的数据变化,并与父组件的数据源建立双向同步。
  @Provide和**@Consume**:用于跨组件层级同步状态变量 。
  @Watch:用于监听状态变量的变化 。
  这些装饰器主要用于在组件内部管理状态变量,并通过不同的同步方式(单向、双向)与父组件或其他组件进行数据交换。

1.1.2. 状态管理(V2试用版)

  状态管理(V2试用版)在V1版本的基础上进行了增强,主要特点包括:
(1)深度观察:状态变量独立于UI,更改数据会触发相应视图的更新。
(2)对象深度观测:支持对象的深度观测和深度监听。
(3)属性级更新:支持对象中属性级精准更新及数组中元素的最小化更新 。
(4)装饰器易用性高:装饰器间配合使用更灵活,有利于组件化 。
(5)状态管理(V2试用版)引入了一些新的装饰器,如:
  @ObservedV2:用于装饰class,使得被装饰的class具有深度监听的能力。
  @Trace:用于装饰被@ObservedV2装饰的class中的属性,使得属性具有深度观测的能力 。
  @ComponentV2:用于装饰struct,支持新的装饰器,如@Local、@Param、@Once、@Event、@Monitor、@Provider、@Consumer等 。

1.1.3. 关系总结

  虽然两者不能混合使用,但V2版本在V1版本的基础上进行了扩展和优化,为开发者提供了更强大的状态管理能力。
  状态管理(V1稳定版)和状态管理(V2试用版)在功能上有以下关系:

1.1.3.1. V1版本

(1)状态变量不能独立于UI,需要通过UI组件来同步更新 。
(2)支持多层嵌套的状态变化,但观测性能有限。
(3)提供了多种装饰器用于组件级别的状态管理和双向数据同步 。

1.1.3.2. V2版本

(1)状态变量独立于UI,支持深度观测和深度监听 。
(2)提供了更灵活的装饰器,支持对象级的精准更新和数组元素的最小化更新。
(3)增强了观测性能和装饰器的易用性,更有利于组件化开发。

1.2. 状态管理(V1稳定版)组件间数据共享

1.2.1. 共享方向:父到子

  @Prop 作用:@Prop从父组件接收数据,组件间数据共享。

@Entry
@Component
struct PropPage {
  //共享方向:父到子, @Prop只能用于子组件获取父组件的数据,无法同步
  @State num: number = 0
  build() {
    Column() {
      //第一个num为子组件中的变量名,第二个num为父组件中的变量名
      PropComponent({ num: this.num })
      Button("父组件+1").onClick(() => {
        this.num++
      })
    }.width("100%")
  }
}

@Component
struct PropComponent {
  //这里的变量名必须与父组件传值中冒号前的变量名一致
  @Prop num: number
  build() {
    Text("子组件:"+this.num.toString())
      .margin({top:30,bottom:20})
  }
}

在这里插入图片描述

1.2.2. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

@Entry
@Component
struct ProvidePage {
  //@Provide配合@Consume可以同步父组件与子孙组件之间的数据,优点是不用传参
  @Provide count: number = 1

  build() {
    Column() {
      Text("父组件:"+this.count )
      //调用子组件时不用传递数据
      ConsumeComponent()
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .padding(30)
  }
}

//子组件
@Component
struct ConsumeComponent {
  //变量名要跟@Provide一样
  @Consume count: number
  build() {
    Column() {
      Text("子组件"+this.count.toString())
      //点击+1
      Text("子组件点击+1").onClick(() => {
        this.count++
      })
    }
  }
}

在这里插入图片描述

1.2.3. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

@Entry
@Component
struct LinkPage {
  //@Link 作用:将数据与父组件的数据共享
  // 共享方向:双向
  @State count: number = 1
  build() {
    Column() {
      Text("父组件中的count:" + this.count.toString())
      //第一个count为在子组件中的变量名,第二个count为在父组件中的变量名
      LinkComponent({ count: $count })
    }.width("100%")
  }
}
//子组件
@Component
struct LinkComponent {
  //变量名要跟父组件传值中冒号前的变量名一致
  @Link count: number

  build() {
    Column() {
      Text("子组件中的count:" +
      this.count.toString())
      //点击+1
      Text("子组件点击+1").onClick(() => {
        this.count++
      })
    }
  }
}

在这里插入图片描述

1.2.4. 共享方向:双向

  @Provide与@Consume 作用:@Provide作为数据的提供方,可以更新其子孙节点的数据;@Consume接收@Provide的数据

//@Observe用于类、对象、数组的声明
@Observed
class stu {
  public id: string
  name: string

  constructor(id: string, name: string) {
    this.id = id
    this.name = name
  }
}


@Entry
@Component
struct ObjectLinkPage {
  //@ObjectLink与@Observe
  // 作用:类、对象、数组类型数据的数据共享
  // 共享方向:双向
  @State me: stu = new stu("001", "张三")

  build() {
    Column() {
      Text("学号:" + this.me.id)
      Text("姓名:" +
      this.me.name)
      //第一个me为子组件中的变量名,第二个me为父组件中的变量名
      ObjectLinkComponent({ me: this.me })
    }.padding(20)
  }
}

@Component
struct ObjectLinkComponent {
  //变量名要与父组件传值中冒号前的变量名一致
  @ObjectLink me: stu

  build() {
    TextInput({ placeholder: "请输入学号" })
      .onChange((value) => {
        this.me.id = value
      })
  }
}

在这里插入图片描述

1.2.5. 总结

  @Prop只能用于子组件获取父组件的数据,无法同步
  @Link可以同步父子组件的数据
  @Provide配合@Consume可以同步父组件与子孙组件之间的数据,优点是不用传参,代码简单
  @ObjectLink配合@Observe可以同步父子组件的类、对象、数组类型的数据

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

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

相关文章

90+ Python 面试问答(2024 版)

90+ Python 面试问答(2024 版) 一、介绍 欢迎来到准备数据科学工作面试的第一步。这里有一个全面而广泛的 Python 面试问题和答案列表,可帮助您在面试中取得好成绩并获得理想的工作!Python 是一种解释型通用编程语言,由于其在人工智能 (AI) 中的使用,如今需求量很大。…

python大小写转换、驼峰大小写转换

一 大小写转换 1第1个单词的首字母大写 capitalize() 2每个单词的首字母大写 title() 3所有字母大小写转换 swapcase() 代码示例 texttoday is sundaYprint(text.capitalize()) # 仅第1个单词的首字母大写 print(text.title()) # 每个单词的首字母大写 print(text.swapcase…

Vue 多选下拉框+下拉框列表中增加标签

1、效果图 2、代码部分 &#xff08;1&#xff09;代码 <el-select class"common-dialog-multiple multipleSelectStyle" change"clusterListChange" v-model"form.clusterId" placeholder"请先选择" multiple filterable defaul…

【BUG】已解决:AttributeError: ‘str‘ object has no attribute ‘read‘

AttributeError: ‘str‘ object has no attribute ‘read‘ 目录 AttributeError: ‘str‘ object has no attribute ‘read‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998https://bbs.csdn.net/topics/617804998 欢迎来到我的主…

(7) cmake 编译C++程序(二)

文章目录 概要整体代码结构整体代码小结 概要 在ubuntu下&#xff0c;通过cmake编译一个稍微复杂的管理程序 整体代码结构 整体代码 boss.cpp #include "boss.h"Boss::Boss(int id, string name, int dId) {this->Id id;this->Name name;this->DeptId …

error C2011: “sockaddr_in”:“struct”类型重定义的修改办法

问题 windows.h和winsock2.h存在有类型重定义,往往体现在头文件包含winsock2.h和windows.h时出现编译错误: error C2011: “sockaddr_in”:“struct”类型重定义 2>D:\Windows Kits\10\Include\10.0.22000.0\shared\ws2def.h(442,5): error C2143: 语法错误: 缺少“}”(…

为什么大家都想学大模型?一文揭秘!

小编只是普通的汽车软件工程师&#xff0c;想了解人工智能&#xff0c;又感觉好遥远&#xff0c;仔细的看了半天&#xff0c;就一个想法 好好拥抱AI吧。真的好强。 相比之下&#xff0c;Autosar 是个 der 啊。。。。 人工智能基础概念全景图 AI -> 机器学习 机器学习 ->…

探索 Python 的新视界:ttkbootstrap 库

探索 Python 的新视界&#xff1a;ttkbootstrap 库 背景与简介 在 Python 的世界中&#xff0c;库的丰富性是其强大功能的重要体现之一。今天&#xff0c;我们将一起探索一个令人兴奋的库——ttkbootstrap。这个库不仅提供了丰富的界面组件&#xff0c;还使得界面设计变得简单…

Python脚本批量下载ECWMF免费数据教程

前情提要 最近需要使用EC的一些数据&#xff0c;摸索下载过程中顺便记录下来&#xff0c;综合了EC上免费数据集的两个数据集的下载方式&#xff0c;使用python脚本下载 相比在网站上操作下载&#xff0c;个人更推荐脚本下载&#xff0c;官方已经封装好了两个库直接可以方便使…

HTML5实现好看的天气预报网站源码

文章目录 1.设计来源1.1 获取天气接口1.2 PC端页面设计1.3 手机端页面设计 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_4…

Django+vue自动化测试平台(27)-- 封装websocket测试

websocket概述&#xff1a; WebSocket 是一种在单个 TCP 连接上进行全双工通信(Full Duplex 是通讯传输的一个术语。通信允许数 据在两个方向上同时传输&#xff0c;它在能力上相当于两个单工通信方式的结合。全双工指可以同时&#xff08;瞬时&#xff09;进 行信号的双向传输…

Linux第四节课(指令与权限)

1、date指令(时间) 程序运行到自己的每一个关键时刻&#xff0c;都要自己打日志&#xff01; 日志包括时间、日志等级、日志具体信息、其他信息等&#xff0c;然后按照行为单位写入文件中&#xff0c;这个文件被称为日志文件&#xff01; 在日志文件中筛选信息时&#xff0c…

idea springBoot启动时覆盖apollo配置中心的参数

vm options -Dorder.stat.corn“0/1 * * * * ?” 只有vm options, -D参数才能覆盖apollo参数 program arguments –key01val01 --key02val02 environment varibales envFAT;key02val02;key03val03

视觉巡线小车——STM32+OpenMV(四)

目录 前言 一、整体控制思路 二、代码实现 1.主函数 2.定时器回调函数 总结 前言 通过以上三篇文章已将基本条件实现&#xff0c;本文将结合以上内容&#xff0c;进行综合控制&#xff0c;实现小车的视觉巡线功能。 系列文章请查看&#xff1a;视觉巡线小车——STM32OpenMV系列…

BUUCTF [WUSTCTF2020]朴实无华

首先进来不知道要干啥&#xff0c;上dirsearch扫出个机器人协议&#xff0c;一看有点东西 直接访问很明显这不是flag 主页面看他说什么不能修改头部&#xff0c;看一下数据包 发现了好东西 看到源码&#xff0c;又得绕过了。不过这编码有点问题导致乱码了 找个在线网站稍微恢复…

QtQuick-第一个程序

新建Qt Quick Application。 main.cpp(保持原有的即可): #include <QGuiApplication> #include <QQmlApplicationEngine>int main (int argc, char *argv[]) {QGuiApplication app (argc, argv);QQmlApplicationEngine engine;const QUrl url (QStringLiteral (&…

南平建网站公司推荐 好用的b2b独立站模板

床品毛巾wordpress独立站模板 床单、被套、毛巾、抱枕、靠垫、围巾、布艺、枕头、乳胶枕、四件套、浴巾wordpress网站模板。 https://www.jianzhanpress.com/?p4065 打印耗材wordpress自建独立站模板 色带、墨盒、碳粉、打印纸、硒鼓、墨盒、墨水、3D打印机、喷头wordpress…

基于 Apache 的 httpd 文件服务器

基于 Apache 的 httpd 文件服务器 文件服务器的简介 httpd&#xff08;HTTP Daemon&#xff0c;超文本传输协议守护进程的简称&#xff09;&#xff0c;运行于网页服务器后台&#xff0c;等待传入服务器请求的软件。 httpd 能够自动回应服务器的请求&#xff0c;并使用 http…

<PLC><Python>使用python与汇川PLC基于socket通讯程序:传感器数据传送与监控

前言 本系列是关于PLC相关的博文,包括PLC编程、PLC与上位机通讯、PLC与下位驱动、仪器仪表等通讯、PLC指令解析等相关内容。 PLC品牌包括但不限于西门子、三菱等国外品牌,汇川、信捷等国内品牌。 除了PLC为主要内容外,PLC相关元器件如触摸屏(HMI)、交换机等工控产品,如…

一文读懂英伟达A800的性能及应用场景

随着人工智能&#xff08;AI&#xff09;和高性能计算&#xff08;HPC&#xff09;领域的快速发展&#xff0c;对处理器的性能要求日益提高。英伟达&#xff08;NVIDIA&#xff09;作为全球领先的图形处理器&#xff08;GPU&#xff09;和人工智能技术公司&#xff0c;不断推出…