HarmonyOS(61) 组件间状态共享的分类以及状态选择器的选取优先级

状态共享

  • 状态共享的分类
  • 状态共享选择器
  • @State与@prop\@Link\@Observed+@ObjectLink组合的区别
  • 合理选择装饰器的顺序
  • 参考资料

状态共享的分类

HarmonyOS的组件之间是可以共享状态数据了,不同的组件之间,状态共享的场景也不一样,根据共享范围从小到大可以有三种场景:

  1. 父子组件之间的共享状态(家庭内部矛盾)。
  2. 同一组件树不同子组件间的共享状态(家族内部矛盾)。
  3. 不同组件树间的共享状态(不同家族间的矛盾)。
  • 父子组件之间的共享状态(家庭内部矛盾):可以用下图表示:”父组件”和其子组件”子组件A”、”子组件B”共享loading状态
    在这里插入图片描述
  • 同一组件树不同子组件间的共享状态(家族内部矛盾):如下图,祖先组件的左子树上”孙子组件AAA”和右子树上”孙子组件BAA”共享loading状态。
    在这里插入图片描述
  • 不同组件树间的共享状态(不同家族间的矛盾):如下图,组件树A内”子组件AA”和组件树B内”孙子组件AAA”共享loading状态。
    在这里插入图片描述

状态共享选择器

对于上述三种场景,ArkUI提供了@State+@Prop、@State+@Link、@State+@Observed+@ObjectLink、@Provide+@Consume、AppStorage、LocalStorage六种装饰器组合以解决不同范围内的组件间状态共享。按照共享范围能力从小到大,各装饰器组合的共享范围能力如下:

  • @State+@Prop、@State+@Link、@State+@Observed+@ObjectLink:三者的共享范围为从@State所在的组件开始,到@Prop/@Link/@ObjectLink所在组件的整条路径,路径上所有的中间组件通过@Prop/@Link/@ObjectLink都可以共享同一个状态。
  • @Provide+@Consume:状态共享范围是以@Provide所在组件为祖先节点的整棵子树,子树上的任意后代组件通过@Consume都可以共享同一个状态。
  • LocalStorage:共享范围为UIAbility内以页面为单位的不同组件树间的共享,适合对于单个Ability而言“全局”的变量,主要用于不同页面间的状态共享场景。
  • AppStorage:共享范围是应用全局。适合对于整个应用而言“全局”的变量或应用的主线程内多个UIAbility实例间的状态共享,如用户信息。

@State与@prop@Link@Observed+@ObjectLink组合的区别

对于具有相同优先级的装饰器选择方案@State+@Prop、@State+@Link和@State+@Observed+@ObjectLink。在选择方案时,需要结合具体的业务场景和状态数据结构的复杂度。这三种不同的装饰器组合方案在内存消耗、性能消耗和对数据类型的支持能力都不相同,如下:
在这里插入图片描述

  • @State+@Prop:适合状态结构简单,且共享状态的组件间层级相差不大的场景。或功能上要求子组件不实时同步修改给父组件的场景。
  • @State+@Link:适合状态结构复杂,且共享状态的组件间层级相差不大的场景。或功能上要求子组件对状态的修改实时同步给父组件的场景。
  • @State+@Observed+@ObjectLink:适合需要观察嵌套类对象的子属性变化的场景或对象数组的数据项属性变化的场景,如监听列表卡片上某个属性的变化。

合理选择装饰器的顺序

在实际开发中,合理选择装饰器主要包含以下三步:

  • 首先根据状态需要共享的范围大小,尽量选择共享能力小的装饰器方案,优先级依次为@State+@Prop、@State+@Link或@State+@Observed+@ObjectLink > @Provide+@Consume > LocalStorage > AppStorage

  • 当共享的状态的组件间层级相差较大时,为避免较差的代码可扩展性和可维护性,@Provide+@Consume的方案要优于层层传递的共享方案,因为@Provide+@Consume适合用于对于整个组件树而言“全局”的状态,且该状态改动不频繁的状态共享场景,如共享界面的路由信息。

  • 对于具有相同优先级的@State+@Prop、@State+@Link或@State+@Observed+@ObjectLink 三个方案,应结合状态的复杂程度和装饰器各自的特性选择。

参考资料

HarmonyOS鸿蒙学习笔记(6) @Consume和@Provide作用说明和简单案例
HarmonyOS鸿蒙学习笔记(5)@State作用说明和简单案例
HarmonyOS鸿蒙学习笔记(12)@Link的作用
HarmonyOS鸿蒙学习笔记(14)@ObjectLink的作用
HarmonyOS(31) @Prop标签使用指南
HarmonyOS(32) @Link标签使用指南
性能优化之最小化状态共享范围

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

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

相关文章

Redis(4):主从复制

一、主从复制概述 主从复制,是指将一台Redis服务器的数据,复制到其他的Redis服务器。前者称为主节点(master),后者称为从节点(slave);数据的复制是单向的,只能由主节点到从节点。   默认情况下,每台Redis…

14 —— Webpack解析别名

import {checkPhone, checkCode} from ../src/utils/check.js 这么使用相对路径不安全 —— 在webpack.config.js中配置解析别名来代表src绝对路径

雪花算法详解:分布式系统中高效唯一的ID生成方案

文章目录 原理与结构工作流程优势局限性应对高并发的方法适用场景 雪花算法(Snowflake Algorithm)是由Twitter开发的一种分布式全局唯一ID生成方案,旨在解决在分布式系统中快速、无冲突地生成唯一标识符的问题。它通过巧妙的设计,…

静态页面 和 动态页面(Java Web开发)

1. 静态页面 1.1 什么是静态页面? 静态页面是指 HTML 文件直接存放在服务器上,不依赖后端逻辑处理而生成内容。客户端浏览器请求静态页面时,服务器直接将文件发送到客户端,浏览器负责渲染页面。 特点: 固定内容&am…

Spring Boot优雅读取配置信息 @EnableConfigurationProperties

很多时候我们需要将一些常用的配置信息比如oss等相关配置信息放到配置文件中。常用的有以下几种,相信大家比较熟悉: 1、Value(“${property}”) 读取比较简单的配置信息: 2、ConfigurationProperties(prefix “property”)读取配置信息并与 …

贴片电阻(片式厚膜电阻)生产工艺流程

贴片电阻(片式厚膜电阻)生产工艺流程 1.基体处理--->印刷电极--->电极烧结2.电阻体印刷--->电阻体烧结3.一次玻璃印刷--->一次玻璃烧结4.激光调阻5.二次玻璃印刷--->二次玻璃烧结6.字码印刷--->字码烧结7.折条8.端电极涂覆9.折粒10.电…

系统思考—结构影响行为

看到这张图,我不禁在思考: 动机和纪律有什么区别? 它们背后隐藏的系统结构是什么? 结构如何影响我们的行为? 更重要的是,我们能如何设计一个系统结构,引导自己走向Discipline的趋势?

transformers bert-base-uncased情感分析

一、使用huggingface中的预训练模型,先要安装transformers、torch和SentencePiece pip install transformers pip install torch pip install SentencePiece 手动下载:https://huggingface.co/google-bert/bert-base-uncased/tree/main 添加以目录&…

Android笔记(三十四):封装带省略号图标结尾的TextView

背景 项目需求需要实现在文本末尾显示一个icon,如果文本很长时则在省略号后面显示icon,使用TextView自带的drawableEnd可以实现,但是如果文本换行了则会显示在TextView垂直居中的位置,不满足要求,于是有了本篇的自定义…

Web开发基础学习——通过React示例学习模态对话框

Web开发基础学习系列文章目录 第一章 基础知识学习之通过React组件学习模态对话框 文章目录 Web开发基础学习系列文章目录前言一、创建新的 React 应用二、 创建模态对话框组件三、修改 App.js四、 添加样式五、启动应用六、访问应用总结 前言 模态对话框(Modal D…

PDF view | Chrome PDF Viewer |Chromium PDF Viewer等指纹修改

1、打开https://www.browserscan.net/zh/ 2、将internal-pdf-viewer改为 internal-pdf-viewer-jdtest看下效果: 3、源码修改: third_party\blink\renderer\modules\plugins\dom_plugin_array.cc namespace { DOMPlugin* MakeFakePlugin(String plugin_…

`console.log`调试完全指南

大家好,这里是 Geek技术前线。 今天我们来探讨 Console.log() 的一些优点。并分析一些基本概念和实践,这些可以让我们的调试工作变得更加高效。 理解前端 log 与后端 log 的区别 前端 log 与后端 log 有着显著的不同,理解这一点至关重要。…

k8s 1.28 聚合层部署信息记录

–requestheader-client-ca-file –requestheader-allowed-namesfront-proxy-client –requestheader-extra-headers-prefixX-Remote-Extra- –requestheader-group-headersX-Remote-Group –requestheader-username-headersX-Remote-User –proxy-client-cert-file –proxy-cl…

Flutter:列表分页,上拉加载下拉刷新,在GetBuilder模板使用方式

GetBuilder模板使用方式参考上一节 本篇主要代码记录如何使用上拉加载下拉刷新, 接口请求和商品组件的代码不包括在内 pubspec.yaml装包 cupertino_icons: ^1.0.8# 分页 上拉加载,下拉刷新pull_to_refresh_flutter3: 2.0.2商品列表:controlle…

使用Cmake导入OpenCV库的大坑记录

CMakeLists.txt cmake_minimum_required(VERSION 3.20)set(OpenCV_DIR D:/Package/opencv4/opencv/mingw-build/install) #这里根据自己OpenCV位置设定find_package(OpenCV REQUIRED)project(PROJ1 CXX)add_executable(PROJ1 main.cpp)target_include_directories(PROJ1 PR…

MySQL —— MySQL 程序

目录 前言 一、MySQL 程序简介 二、mysqld -- MySQL 服务器 三、mysql -- MySQL 客户端 1. mysql 客户端简介 2. mysql 客户端选项 (1)指定选项的方式 (2)mysql 客户端命令常用选项 (3)在命令行中使…

STM32 PWM波形详细图解

目录 前言 一 PWM介绍 1.1 PWM简介 1.2 STM32F103 PWM介绍 1.3 时钟周期与占空比 二.引脚映像关系 2.1引脚映像与寄存器 2.2 复用功能映像 三. PWM 配置步骤 3.1相关原理图 3.2配置流程 3.2.1 步骤一二: 3.2.2 步骤三: 3.2.3 步骤四五六七: …

【软件安装】在Ubuntu中安装mysql5.7

参考:cubuntu安装mysql5.6_mob649e81553a70的技术博客_51CTO博客 问题1:sudo apt install mysql-server-5.7 -y 若提示mysql-server 没有可安装候选 答: sudo nano /etc/apt/sources.list 在开头加入: # 阿里源 deb http://mi…

多方法做配对样本t检验(三)

Wilcoxon符号秩检验 Wilcoxon符号秩检验(Wilcoxon Signed-Rank Test) 是一种非参数统计方法,用于检验两组相关样本(配对样本)之间的差异是否显著。它通常用来代替配对样本t检验,特别是在数据不符合正态分布…

修改IDEA配置导致Spring Boot项目读取application.properties中文乱码问题

之前很多配置都是放在nacos里面,然后这次同事有个配置写在application.properties中,这个配置含有中文,启动之后发现拿到的中文值会乱码,然后就帮忙看了一下问题。 排查问题 经过不停的百度、排查发现,spring读取app…