首页 > 其他分享 >HarmonyOS—状态管理概述

HarmonyOS—状态管理概述

时间:2024-02-17 14:22:56浏览次数:26  
标签:状态变量 状态 变量 HarmonyOS 概述 组件 UI 装饰

在前文的描述中,我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面,就需要引入“状态”的概念。

图1 效果图
在这里插入图片描述

上面的示例中,用户与应用程序的交互触发了文本状态变更,状态变更引起了UI渲染,UI从“Hello World”变更为“Hello ArkUI”。

在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制。

自定义组件拥有变量,变量必须被装饰器装饰才可以成为状态变量,状态变量的改变会引起UI的渲染刷新。如果不使用状态变量,UI只能在初始化时渲染,后续将不会再刷新。 下图展示了State和View(UI)之间的关系。

在这里插入图片描述

  • View(UI):UI渲染,指将build方法内的UI描述和@Builder装饰的方法内的UI描述映射到界面。
  • State:状态,指驱动UI更新的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

基本概念

  • 状态变量:被状态装饰器装饰的变量,状态变量值的改变会引起UI的渲染更新。示例:@State num: number = 1,其中,@State是状态装饰器,num是状态变量。
  • 常规变量:没有被状态装饰器装饰的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。以下示例中increaseBy变量为常规变量。
  • 数据源/同步源:状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。以下示例中数据源为count: 1。
  • 命名参数机制:父组件通过指定参数传递给子组件的状态变量,为父子传递同步参数的主要手段。示例:CompA: ({ aProp: this.aProp })。
  • 从父组件初始化:父组件使用命名参数机制,将指定参数传递给子组件。子组件初始化的默认值在有父组件传值的情况下,会被覆盖。示例:
@Component
struct MyComponent {
  @State count: number = 0;
  private increaseBy: number = 1;

  build() {
  }
}

@Component
struct Parent {
  build() {
    Column() {
      // 从父组件初始化,覆盖本地定义的默认值
      MyComponent({ count: 1, increaseBy: 2 })
    }
  }
}
  • 初始化子节点:父组件中状态变量可以传递给子组件,初始化子组件对应的状态变量。示例同上。
  • 本地初始化:在变量声明的时候赋值,作为变量的默认值。示例:@State count: number = 0。

装饰器总览

ArkUI提供了多种装饰器,通过使用这些装饰器,状态变量不仅可以观察在组件内的改变,还可以在不同组件层级间传递,比如父子组件、跨组件层级,也可以观察全局范围内的变化。根据状态变量的影响范围,将所有的装饰器可以大致分为:

  • 管理组件拥有状态的装饰器:组件级别的状态管理,可以观察组件内变化,和不同组件层级的变化,但需要唯一观察同一个组件树上,即同一个页面内。
  • 管理应用拥有状态的装饰器:应用级别的状态管理,可以观察不同页面,甚至不同UIAbility的状态变化,是应用内全局的状态管理。
    从数据的传递形式和同步类型层面看,装饰器也可分为:
  • 只读的单向传递;
  • 可变更的双向传递。

图示如下,具体装饰器的介绍,可详见管理组件拥有的状态和管理应用拥有的状态。开发者可以灵活地利用这些能力来实现数据和UI的联动。
在这里插入图片描述
上图中,Components部分的装饰器为组件级别的状态管理,Application部分为应用的状态管理。开发者可以通过@StorageLink/@LocalStorageLink实现应用和组件状态的双向同步,通过@StorageProp/@LocalStorageProp实现应用和组件状态的单向同步。

管理组件拥有的状态,即图中Components级别的状态管理:

  • @State:@State装饰的变量拥有其所属组件的状态,可以作为其子组件单向和双向同步的数据源。当其数值改变时,会引起相关组件的渲染刷新。
  • @Prop:@Prop装饰的变量可以和父组件建立单向同步关系,@Prop装饰的变量是可变的,但修改不会同步回父组件。
  • @Link:@Link装饰的变量和父组件构建双向同步关系的状态变量,父组件会接受来自@Link装饰的变量的修改的同步,父组件的更新也会同步给@Link装饰的变量。
  • @Provide/@Consume:@Provide/@Consume装饰的变量用于跨组件层级(多层组件)同步状态变量,可以不需要通过参数命名机制传递,通过alias(别名)或者属性名绑定。
  • @Observed:@Observed装饰class,需要观察多层嵌套场景的class需要被@Observed装饰。单独使用@Observed没有任何作用,需要和@ObjectLink、@Prop连用。
  • @ObjectLink:@ObjectLink装饰的变量接收@Observed装饰的class的实例,应用于观察多层嵌套场景,和父组件的数据源构建双向同步。

说明
仅@Observed/@ObjectLink可以观察嵌套场景,其他的状态变量仅能观察第一层,详情见各个装饰器章节的“观察变化和行为表现”小节。

管理应用拥有的状态,即图中Application级别的状态管理:

  • AppStorage是应用程序中的一个特殊的单例LocalStorage对象,是应用级的数据库,和进程绑定,通过@StorageProp和@StorageLink装饰器可以和组件联动。
  • AppStorage是应用状态的“中枢”,将需要与组件(UI)交互的数据存入AppStorage,比如持久化数据PersistentStorage和环境变量Environment。UI再通过AppStorage提供的装饰器或者API接口,访问这些数据。
  • 框架还提供了LocalStorage,AppStorage是LocalStorage特殊的单例。LocalStorage是应用程序声明的应用状态的内存“数据库”,通常用于页面级的状态共享,通过@LocalStorageProp和@LocalStorageLink装饰器可以和UI联动。

其他状态管理功能
@Watch用于监听状态变量的变化。

$$运算符:给内置组件提供TS变量的引用,使得TS变量和内置组件的内部状态保持同步。

要想成为一名合格的鸿蒙高级开发工程师,以上知识点是必须要掌握的,除此之外,还需要掌握一些鸿蒙应用开发相关的一些技术

为了能够让大家跟上互联网时代的技术迭代,在这里跟大家分享一下我自己近期学习心得以及参考网上资料整理出的一份最新版的鸿蒙学习提升资料,有需要的小伙伴自行领取,限时开源,先到先得~~~~

领取以下高清学习路线原图请点击→https://docs.qq.com/doc/DZXB5WmVIVHRwS0pY
纯血鸿蒙HarmonyOS基础技能学习路线图

在这里插入图片描述

领取以上完整高清学习路线图,请点击→https://docs.qq.com/doc/DZXB5WmVIVHRwS0pY
小编自己整理的部分学习资料(包含有高清视频、开发文档、电子书籍等)

在这里插入图片描述

以上分享的学习路线都适合哪些人跟着学习?
-应届生/计算机专业
通过学习鸿蒙新兴技术,入行互联网,未来高起点就业。
-0基础转行
提前布局新方向,抓住风口,自我提升,获得更多就业机会。
-技术提升/进阶跳槽
发展瓶颈期,提升职场竞争力,快速掌握鸿蒙技术,享受蓝海红利。

在这里插入图片描述

写在最后

如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
关注小编,同时可以期待后续文章ing,不定期分享原创知识。
想要获取更多完整鸿蒙最新VIP学习资料,请点击→https://docs.qq.com/doc/DZXB5WmVIVHRwS0pY

标签:状态变量,状态,变量,HarmonyOS,概述,组件,UI,装饰
From: https://www.cnblogs.com/11usd/p/18017933

相关文章

  • 车辆智能制造能力概述
    车辆智能制造能力概述图2-73表示车辆制造能力示例。 图2-73.车辆制造能力示例图2-74表示车辆智能车间示例。 图2-74.车辆智能车间示例图2-75表示车辆智慧物流示例(一)。  图2-75.车辆智慧物流示例(一)图2-76表示车辆智慧物流示例(二)。 图2-76.车辆智慧物流示例(二)......
  • vue 状态管理vuex action 用法
    index.jsimport{createStore}from"vuex";conststore=createStore({  state:{    count:100  },  getters:{    compower(state){      return(id)=>state.count*id    }  },  mutations:{   ......
  • vue 状态管理vuex Mutation 加传递参数用法
    index.js写法import{createStore}from"vuex";conststore=createStore({  state:{    count:100  },  getters:{    compower(state){      return(id)=>state.count*id    }  },  mutations:{  ......
  • 园区网络架构概述
    工厂、政府机关、商场、写字楼、校园、公园等,这些场所内为了实现数据互通而搭建的网络都可以称之为园区网。园区有大有小,有行业属性的不同,相应地,园区网络也变化多样。但是,无论如何变化,园区网络一般划分为出口层、核心层、汇聚层及接入层。园区网络分类大型园区网络终端......
  • 第一章 Python概述
     第一章、Python概述 1.Python是什么 2.Python语言的特点 3.Python语言的缺点 4.Python程序的执行过程 5.安装Python 2.1通过Python官网安装包来安装 2.2使用pip安装第三方库 2.3通过anaconda安装Python 2.4两种Python安装方式比较 6.运行Python......
  • Go语言精进之路读书笔记第20条——在init函数中检查包级变量的初始状态
    20.1认识init函数init函数的特点:运行时调用,Go程序中不能显式调用顺序执行,等待一个init函数执行完毕并返回后再执行下一个init函数在整个Go程序生命周期内仅会被执行一次先被传递给Go编译器的源文件中的init函数先被执行,同一个源文件中的多个init函数按声明顺序依次执行。但......
  • 日本房产泡沫破灭后,普通人的生存状态
    日本房地产泡沫破灭后,整个经济体系都受到了巨大的冲击。许多企业倒闭,失业率飙升,人们的生活水平也大幅下降。然而,在这场危机中,一些行业却迎来了新的机遇和挑战。行业动漫产业成为了日本经济的支柱产业之一。在泡沫经济时期,日本的动漫产业一度风靡全球,成为了日本文化的代表之一,一......
  • 第二十一天:mysql服务器配置和状态
    一、服务器配置和状态官方帮助文档:https://dev.mysql.com/doc/refman/8.0/en/server-option-variable-reference.htmlhttps://dev.mysql.com/doc/refman/5.7/en/server-option-variable-reference.htmlhttps://mariadb.com/kb/en/library/full-list-of-mariadb-options-syste......
  • 二、数据概述
    一、什么是数据?数据是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的原始素材。在计算机系统中,数据以二进制信息单元0、1的形式表示在计算机系统中,各种字母、数字符号的组合、语音、图形、图像等统称为数据,数据经过加工后就成为信息。二、数据的表现......
  • Unity Coroutine 协程概述
    协程技术是将一个方法切分到不同帧上执行的技术,但是他和多线程有本质区别,多线程技术是利用CPU物理核心实现同时运行多个方法(程序)的技术,而协程只是让一个方法能够被我们拆分为多个部分,让每个部分在我们规定的时刻执行,看起来就好像同时在执行几个方法一样。简单而言,协程技术就是将方......