0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

OpenHarmony页面级变量的状态管理

ArkUI详解 来源:ArkUI详解 作者:ArkUI详解 2022-12-07 08:58 次阅读

状态管理

@State、@Prop、@Link、@Provide、Consume、@ObjectLink、@Observed和@Watch用于管理页面级变量的状态。

装饰器 装饰内容 说明
@State 基本数据类型,类,数组 修饰的状态数据被修改时会触发组件的build方法进行UI界面更新。
@Prop 基本数据类型 修改后的状态数据用于在父组件和子组件之间建立单向数据依赖关系。修改父组件关联数据时,当前组件会重新渲染。
@Link 基本数据类型,类,数组 父子组件之间的双向数据绑定,父组件的内部状态数据作为数据源,任何一方所做的修改都会反映给另一方。
@Observed @Observed应用于类,表示该类中的数据变更被UI页面管理。
@ObjectLink 被@Observed所装饰类的对象 @ObjectLink装饰的状态数据被修改时,在父组件或者其他兄弟组件内与它关联的状态数据所在的组件都会重新渲染。
@Consume 基本数据类型,类,数组 @Consume装饰的变量在感知到@Provide装饰的变量更新后,会触发当前自定义组件的重新渲染。
@Provide 基本数据类型,类,数组 @Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面重新渲染。

@State

@State装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新。

@State状态数据具有以下特征:

支持多种类型数据:支持class、number、boolean、string强类型数据的值类型和引用类型,以及这些强类型构成的数组,即Array、Array、Array、Array。不支持object和any。

支持多实例:组件不同实例的内部状态数据独立。

内部私有:标记为@State的属性是私有变量,只能在组件内访问。

需要本地初始化:必须为所有@State变量分配初始值,变量未初始化可能导致未定义的框架异常行为。

创建自定义组件时支持通过状态变量名设置初始值:在创建组件实例时,可以通过变量名显式指定@State状态变量的初始值。

@Prop

@Prop与@State有相同的语义,但初始化方式不同。@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化,允许组件内部修改@Prop变量,但变量的更改不会通知给父组件,即@Prop属于单向数据绑定。

@Prop状态数据具有以下特征:

支持简单类型:仅支持number、string、boolean等简单数据类型;

私有:仅支持组件内访问;

支持多个实例:一个组件中可以定义多个标有@Prop的属性;

创建自定义组件时将值传递给@Prop变量进行初始化:在创建组件的新实例时,必须初始化所有@Prop变量,不支持在组件内部进行初始化

@Link

@Link装饰的变量可以和父组件的@State变量建立双向数据绑定:

支持多种类型:@Link支持的数据类型与@State相同,即class、number、string、boolean或这些类型的数组;

私有:仅支持组件内访问;

单个数据源:父组件中用于初始化子组件@Link变量的必须是@State变量;

双向通信:子组件对@Link变量的更改将同步修改父组件中的@State变量;

创建自定义组件时需要将变量的引用传递给@Link变量,在创建组件的新实例时,必须使用命名参数初始化所有@Link变量。@Link变量可以使用@State变量或@Link变量的引用进行初始化,@State变量可以通过'$'操作符创建引用。

@Observed和ObjectLink数据管理

开发者只想针对父组件中某个数据对象的部分信息进行同步时,如果这些部分信息是一个类对象,就可以使用@ObjectLink配合@Observed来实现,如下图所示。

@Observed用于类,@ObjectLink用于变量。

@ObjectLink装饰的变量类型必须为类(class type)。

类要被@Observed装饰器所装饰。

不支持简单类型参数,可以使用@Prop进行单向同步。

@ObjectLink装饰的变量是不可变的。

属性的改动是被允许的,当改动发生时,如果同一个对象被多个@ObjectLink变量所引用,那么所有拥有这些变量的自定义组件都会被通知进行重新渲染。

@ObjectLink装饰的变量不可设置默认值。

必须让父组件中有一个由@State、@Link、@StorageLink、@Provide或@Consume装饰的变量所参与的TS表达式进行初始化。

@ObjectLink装饰的变量是私有变量,只能在组件内访问

@Consume和@Provide

@Provide作为数据的提供方,可以更新其子孙节点的数据,并触发页面渲染。@Consume在感知到@Provide数据的更新后,会触发当前自定义组件的重新渲染。

@Provide

名称 说明
装饰器参数 是一个string类型的常量,用于给装饰的变量起别名。如果规定别名,则提供对应别名的数据更新。如果没有,则使用变量名作为别名。推荐使用@Provide('alias')这种形式。
同步机制 @Provide的变量类似@State,可以修改对应变量进行页面重新渲染。也可以修改@Consume装饰的变量,反向修改@State变量。
初始值 必须设置初始值。
页面重渲染场景 触发页面渲染的修改:- 基础类型(boolean,string,number)变量的改变;- @Observed class类型变量及其属性的修改;- 添加,删除,更新数组中的元素。

@Consume

类型 说明
初始值 不可设置默认初始值。

@Watch

@Watch用于监听状态变量的变化

具体允许哪种方式取决于状态变量的装饰器:

装饰器类型 本地初始化 通过构造函数参数初始化
@State 必须 可选
@Prop 禁止 必须
@Link 禁止 必须
@StorageLink 必须 禁止
@StorageProp 必须 禁止
@Provide 必须 可选
@Consume 禁止 禁止
@ObjectLink 禁止 必须
常规成员变量 推荐 可选

从上表中可以看出:

@State变量需要本地初始化,初始化的值可以被构造参数覆盖。

@Prop和@Link变量必须且仅通过构造函数参数进行初始化。

通过构造函数方法初始化成员变量,需要遵循如下规则:

从父组件中的变量(下)到子组件中的变量(右) @State @Link @Prop 常规变量
@State 不允许 允许 允许 允许
@Link 不允许 允许 不推荐 允许
@Prop 不允许 不允许 允许 允许
@StorageLink 不允许 允许 不允许 允许
@StorageProp 不允许 不允许 不允许 允许
常规变量 允许 不允许 不允许 允许

从上表中可以看出:

父组件的常规变量可以用于初始化子组件的@State变量,但不能用于初始化@Link或@Prop变量。

父组件的@State变量可以初始化子组件的@Prop、@Link(通过$)或常规变量,但不能初始化子组件的@State变量。

父组件的@Link变量可以初始化子组件的@Link或常规变量。但是初始化子组件的@State成员是语法错误,此外不建议初始化@Prop。

父组件的@Prop变量可以初始化子组件的常规变量或@Prop变量,但不能初始化子组件的@State或@Link变量。

@StorageLink和@StorageProp不允许由父组件中传递到子组件。

除了上述规则外,还需要遵循TS的强类型规则。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 变量
    +关注

    关注

    0

    文章

    613

    浏览量

    28369
  • OpenHarmony
    +关注

    关注

    25

    文章

    3722

    浏览量

    16317
收藏 人收藏

    评论

    相关推荐

    鸿蒙OS开发实例:【应用状态变量共享】

    平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息。虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单。
    的头像 发表于 04-03 15:09 1337次阅读
    鸿蒙OS开发实例:【应用<b class='flag-5'>状态变量</b>共享】

    harmonyos开发者平台

    使用@State、@Prop、@Link、@Watch、@Provide、@Consume管理页面变量状态,实现对
    的头像 发表于 05-06 16:02 850次阅读
    harmonyos开发者平台

    HarmonyOS实践之应用状态变量共享

    平时在开发的过程中,我们会在应用中共享数据,在不同的页面间共享信息。虽然常用的共享信息,也可以通过不同页面中组件间信息共享的方式,但有时使用应用级别的状态管理会让开发工作变得简单。 根
    发表于 12-27 09:48

    Harmony 鸿蒙页面变量状态管理

    页面变量状态管理 @State、@Prop、@Link、@Provide、@Consume、@ObjectLink、@Observed和
    发表于 01-24 20:04

    OpenHarmony应用ArkUI 状态管理开发范例

    本文转载自《#2023盲盒+码# OpenHarmony应用ArkUI 状态管理开发范例》,作者:zhushangyuan_ 本文根据橘子购物应用,实现ArkUI中的状态
    发表于 09-01 15:03

    OpenHarmony页面UI状态存储:LocalStorage

    LocalStorage是页面的UI状态存储,通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility内
    发表于 10-17 17:01

    OpenHarmony状态变量更改通知:@Watch装饰器

    @Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变,可以使用@Watch为状态变量设置回调函数。 说明: 从API version 9开始,该装饰器支持在ArkTS卡片
    发表于 10-31 17:45

    动态威廉希尔官方网站 的状态变量分析

    动态威廉希尔官方网站 的状态变量分析􀂄 7.1 威廉希尔官方网站 的状态状态变量􀂄 7.2 状态方程及其列写􀂄 7.3
    发表于 12-04 18:01 0次下载
    动态威廉希尔官方网站
的<b class='flag-5'>状态变量</b>分析

    状态变量滤波器,状态变量滤波器原理是什么?

    状态变量滤波器,状态变量滤波器原理是什么? 状态变量滤波器,又称多态变量滤波器,它可以分别从不同的点同时输出高通、带通、低通等,且
    发表于 03-24 14:24 6633次阅读

    关于UI页面状态:空白状态

    设计师必须让用户在 首次使用 就有好的体验!本篇就要探讨设计师最常忽略的页面 空白状态(empty state) 页面。 大多 app 平均会失去 77% 的用户(用户下载后三天)。更糟的是,在
    发表于 09-26 11:45 0次下载

    简单实用的页面状态布局

    项目介绍 项目名称:loadinglayout 所属系列:openharmony第三方组件适配移植 功能:简单实用的页面状态布局(content,loading,empty,error) 项目移植
    发表于 03-21 11:21 6次下载
    简单实用的<b class='flag-5'>页面</b>多<b class='flag-5'>状态</b>布局

    基于openharmony适配移植可以下拉消失的页面滑块

    项目介绍 项目名称:页面滑块 所属系列:openharmony的第三方组件适配移植 功能:可以下拉消失的PageSlider 项目移植状态:主功能完成 调用差异:无 开发版本:sdk6,DevEco
    发表于 04-08 09:46 1次下载

    基于openharmony适配移植可从后台动态变更页面的组件

    项目介绍 项目名称:Proteus 所属系列:openharmony 第三方组件适配移植 功能:一个可从后台动态变更页面的组件 项目移植状态:主功能完成 调用差异:有(json数据中将布局名称等更换
    发表于 04-08 10:24 4次下载

    Harmony 鸿蒙应用变量状态管理

    应用变量状态管理 在前面的章节中,已经讲述了如何管理页面
    的头像 发表于 01-24 21:30 500次阅读
    Harmony 鸿蒙应用<b class='flag-5'>级</b><b class='flag-5'>变量</b>的<b class='flag-5'>状态</b><b class='flag-5'>管理</b>

    Harmony 鸿蒙页面变量状态管理

    页面变量状态管理 @State、@Prop、@Link、@Provide、@Consume、@ObjectLink、@Observed和
    的头像 发表于 01-25 10:42 596次阅读
    Harmony 鸿蒙<b class='flag-5'>页面</b><b class='flag-5'>级</b><b class='flag-5'>变量</b>的<b class='flag-5'>状态</b><b class='flag-5'>管理</b>