ArkUI-状态管理-@Provide、@Consume、@Observed、@ObjectLink

news2024/11/25 5:53:54

ArkUI-状态管理

  • @Provide装饰器和@Consume装饰器:与后代组件双向同步
    • 概述
    • 观察变化
    • 框架行为
    • Provide支持allowOverride参数
  • @Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化
    • 概述
    • 限制条件
    • 观察变化
    • 框架行为

@Provide装饰器和@Consume装饰器:与后代组件双向同步

@Provide和@Consume,应用于与后台组件的双向数据同步,应用于状态数据在多个层级之间传递的场景。不同于之前提到的父子组件之间通过命名参数传递的方式,@Provide和@Consume摆脱参数传递机制的束缚,实现跨层级传递。

其中@Provide装饰的变量是在祖先组件中,@Consume装饰的变量是在后代组件中。

概述

@Provide和@Consume装饰的变量有以下特性:

  • @Provide装饰的状态变量自动对其所有的后代组件可用。
  • 后代通过使用@Consume去获取@Provide提供的变量。
  • @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定,建议类型相同,否则会发生类型隐式转换,可能导致应用数据异常。
// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

@Provide和@Consume通过相同的变量名或者相同的变量别名绑定时,@Provide装饰的变量和@Consume装饰的变量是一对多的关系。不允许在同一个自定义组件内、包括其子组件内生命多个同名或者同别名的@Provide装饰的变量,@Provide的属性名或者别名需要唯一且确定,如果生命多个同名或者同别名的@Provide装饰的变量,会发生运行时错误。

观察变化

  • 当装饰的数据类型为boolean、string、number类型时,可以观察到数据的变化。
  • 当装饰的数据类型为class或者Object的时候,可以观察到赋值和属性赋值的变化。
  • 当装饰的对象是array的时候,可以观察到数组的添加、删除、更新数组单元。
  • 当装饰的对象是Date时,可以观察到Date整体的赋值,同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。
  • 当装饰的变量是Map时,可以观察到Map整体的赋值,同时可通过调用Map的接口set, clear, delete 更新Map的值。
  • 当装饰的变量是Set时,可以观察到Set整体的赋值,同时可通过调用Set的接口add, clear, delete 更新Set的值。

框架行为

  1. 初始渲染:
    • @Provide装饰的变量会以map的形式,传递给当前@Provide所属组件的所有子组件。
    • 子组件如果使用@Consume变量,则会在map中查找是否有该变量名/别名对应的@Provide的变量,如果查找不到,框架会抛出JS ERROR
    • 在初始化@Consume变量时,和@State/@Link的流程类似,@Consume变量会在map中查找对应的@Provide变量进行保存,并把自己注册给@Provide。
  2. 当@Provide装饰的数据发生变化时:
    • 通过初始渲染的步骤可知,子组件@Consume已把自己注册给父组件。父组件@Provide变量变更后,会遍历所有依赖它的系统㢟和状态变量。
    • 通知@Consume更新后,子组件所有依赖@Consume的系统组件都会被通知更新。
  3. 当@Consume装饰的数据发生变化时:
    通过初始渲染的步骤可知,子组件@Consume持有@Provide的实例。在@Consume更新后调用@Provide的更新方法,将更新值同步回@Provide,以此实现@Consume向@Provide的同步更新。

在这里插入图片描述

Provide支持allowOverride参数

上边我们提到,不允许在同一个自定义组件内、包括其子组件内生命多个同名或者同别名的@Provide装饰的变量,@Provide的属性名或者别名需要唯一且确定,如果生命多个同名或者同别名的@Provide装饰的变量,会发生运行时错误。

如果需要对@Provide装饰的变量进行重写,可以子组件中重写的位置使用allowOverride参数。

@Component
struct GrandSon {
  // @Consume装饰的变量通过相同的属性名绑定其祖先内的@Provide装饰的变量
  @Consume("reviewVotes") reviewVotes: number;

  build() {
    Column() {
      Text(`reviewVotes(${this.reviewVotes})`) // Text显示10
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
    }
    .width('50%')
  }
}

@Component
struct Child {
  @Provide({ allowOverride: "reviewVotes" }) reviewVotes: number = 10;

  build() {
    Row({ space: 5 }) {
      GrandSon()
    }
  }
}

@Component
struct Parent {
  @Provide({ allowOverride: "reviewVotes" }) reviewVotes: number = 20;

  build() {
    Child()
  }
}

@Entry
@Component
struct GrandParent {
  @Provide("reviewVotes") reviewVotes: number = 40;

  build() {
    Column() {
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
      Parent()
    }
  }
}

在上面的示例中:

  • GrandParent声明了@Provide(“reviewVotes”) reviewVotes: number = 40
  • Parent是GrandParent的子组件,声明@Provide为allowOverride,重写父组件GrandParent中的reviewVotes变量为20。如果不设置allowOverride,则会抛出运行时报错,提示@Provide重复定义。Child同理。
  • GrandSon在初始化@Consume的时候,@Consume装饰的变量通过相同的属性名绑定其最近的祖先的@Provide装饰的变量
  • GrandSon查找到相同属性名的@Provide在祖先Child中,所以@Consume(“reviewVotes”) reviewVotes: number初始化数值为10。如果Child中没有定义与@Consume同名的@Provide,则继续向上寻找Parent中的同名@Provide值为20,以此类推。
  • 如果查找到根节点还没有找到key对应的@Provide,则会报初始化@Consume找不到@Provide的报错。

@Observed装饰器和@ObjectLink装饰器:嵌套类对象属性变化

前边我们讲到的装饰器,对于class的观测,都无法观测到嵌套属性但是在实际应用开发中,应用会根据开发需要,封装自己的数据模型。对于多层嵌套的情况,比如二维数组,或者数组项class,或者class的属性是class,他们的第二层的属性变化是无法观察到的。这就引出了@Observed/@ObjectLink装饰器。

概述

@ObjectLink和@Observed类装饰器用于涉及嵌套对象或数组的场景中进行双向数据同步:

  • 被@Observed装饰的类,可以被观察到属性的变化。
  • 子组件中@ObjectLink装饰器装饰的状态变量,用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中的属性,这个属性同样也需要被@Observed装饰。
  • @Observed用于嵌套类场景中,观察对象类属性变化,要配合自定义组件使用(示例详见嵌套对象),如果要做数据双/单向同步,需要搭配@ObjectLink或者@Prop使用。

限制条件

  • 使用@Observed装饰class会改变class原始的原型链,@Observed和其他类装饰器装饰同一个class可能会带来问题。
  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
  • @ObjectLink装饰的数据为可读类型,不允许@ObjectLink装饰的数据自身赋值。
  • 如果需要使用赋值操作,使用@Prop。

观察变化

  • @Observed装饰的类,如果其属性为非简单类型,比如class、Object或者数组,也需要被@Observed装饰,否则将观察不到其属性的变化。

  • @ObjectLink只能接收被@Observed装饰的class的实例。

  • 继承Date的class时,可以观察到Date整体的赋值,同时可通过调用Date的接口setFullYear, setMonth, setDate, setHours, setMinutes, setSeconds, setMilliseconds, setTime, setUTCFullYear, setUTCMonth, setUTCDate, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds 更新Date的属性。

  • 继承Map的class时,可以观察到Map整体的赋值,同时可通过调用Map的接口set, clear, delete 更新Map的值。

  • 继承Set的class时,可以观察到Set整体的赋值,同时可通过调用Set的接口add, clear, delete 更新Set的值。

框架行为

  1. 初始渲染
    • @Observed装饰的class的实例会被不透明的代理对象包装,代理了class上的属性的setter和getter方法
    • 子组件中@ObjectLink装饰的从父组件初始化,接收被@Observed装饰的class的实例,@ObjectLink的包装类会将自己注册给@Observed class。
  2. 属性更新:
    • 当@Observed装饰的class属性改变时,会走到代理的setter和getter,然后遍历依赖它的@ObjectLink包装类,通知其数据更新。

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

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

相关文章

【python计算机视觉编程——4.照相机模型与增强现实】

python计算机视觉编程——4.照相机模型与增强现实 4.照相机模型与增强现实4.1 真空照相机模型4.1.1 照相机矩阵4.1.2 三维点的投影4.1.3 照相机矩阵的分解4.1.4 计算照相机中心 4.2 照相机标定4.3 以平面和标记物进行姿态估计sift.pyhomography.py主函数homography.pycamera.py…

开源 AI 智能名片 O2O 商城小程序在营销中的应用

摘要:本文探讨了开源 AI 智能名片 O2O 商城小程序在营销中的应用,重点分析了喜好原则、互惠互利和高度认可三个方面对小程序推广和用户忠诚度提升的重要性。通过融入这些原则,开源 AI 智能名片 O2O 商城小程序能够更好地满足用户需求&#xf…

UnsupportedOperation: not readable 解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

【操作系统】同步互斥与Golang互斥锁实现

【操作系统】同步互斥问题与Golang互斥锁实现 1 背景1.1 独立线程1.2 合作线程1.3 合作有风险,为什么需要合作1.4 多协程并发执行的风险举例(Golang语言)1.5 对风险的思考 2 同步互斥2.1 一些概念2.2 解决方案——保护临界区2.3 禁用硬件中断…

【转变之旅】从程序员到AI绘画艺术家,我的月入过万之路

曾经,我的生活平淡如水,作为一名程序员,每天重复着朝九晚五的工作。然而,一场突如其来的裁员,让我陷入了失业的深渊。为了生活,我选择了开滴滴谋生。没想到,这个看似权宜之计的决定,…

计算机网络——ARP篇

最近在学习计算机网络,做一下学习笔记: 抛出疑问?什么是ARP?ARP协议的作用是什么?ARP的工作原理是什么?ARP有哪些类型? 首先,我们要了解ARP的概念,ARP(Addre…

python计算机视觉编程——照相机模型与增强现实

一、针孔照相机模型 针孔照相机模型(有时称为射影照相机模型)是计算机视觉中广泛使用的照相机模型。针孔照相机模型简单,并且具有足够的精确度。这个名字来源于一种类似暗箱机的照相机。该照相机从一个小孔采集射到暗箱内部的光线。在针孔照相机模型中,在光线投影到图像平面之…

Windows 11 下使用 MSVC 2022 编译64位Nginx

一、软件准备 1、安装 Visual Studio 2022 包含单个组件: .NET Framework 4.6.1 目标包.NET Framework 4.6.1 SDKWindows 通用 C 运行时Windows 通用 CRT SDKMSVC v142 - VS 2019 C x64/x86 生成工具(v14.26)对 v142 生成工具(14.21)的 C/CLI 支持Clang compile fo…

Linux中MFS分布式文件系统(实战教程)全网最详细

MFS架构图 元数据服务器(Master):在整个体系中负责管理文件系统,维护元数据。 元数据日志服务器(MetaLogger):备份Master服务器的变化日志文件,文件类型为 changelog_ml.*.mfs。当 …

第六届机器学习、大数据与商务智能国际会议(MLBDBI 2024)

目录 主办单位 大会简介 会议组委会 征稿主题 参会方式 会议日程 重要信息 大会官网:www.mlbdbi.org 会议时间:2024年11月1-3日 会议地点:中国-杭州 收录检索:EI Compendex,Scopus 主办单位 大会简介 由…

SSD300模型总结

1、SSD网络结构 SSD以VGG16作为特征提取特征的基础模型,然后在VGG16的基础上增加了额外的卷积和池化操作来获得更多不同尺度的特征图用来检测不同大小的目标 本文主要是SSD300作为例子进行分析 整体主要分为3个部分 backbone网络:VGG16Extra网络&…

使用Mid360进行FAST_LIO建图,并使用Octomap在线转栅格地图

在之前的教程中,我们已经成功的安装了激光雷达驱动,成功复现了FAST_LIO,并使用OCtomap将点云地图转为栅格地图。 但是之前我们是建图生成了.PCD文件后,读取pcd文件进行离线octomap转栅格地图,这样在实际的场景中并不完…

Python实现贝叶斯优化器(Bayes_opt)优化卷积神经网络-双向长短时记忆循环神经网络分类模型(CNN-BiLSTM分类算法)项目实战

说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 随着深度学习技术的发展,卷积神经网络(Convolutional Neural Networks, CNNs&a…

Linux驱动基础 | sys文件系统

前言思考sys文件系统简介 sys文件系统是什么sys文件系统功能描述sysfs与objectsysfs接口使用 sysfs读写操作例子sysfs常用的接口sysfs常用的结构体代码实验总结 前言 上篇介绍了Linux驱动中procfs接口的创建,今天介绍sysfs接口的创建,本篇内核采用5.10版…

分支电路导体的尺寸确定和保护

本文旨在确定为分支电路负载供电的导体的尺寸和保护。 支路额定电流 NEC 第 210 条规定了分支电路导体尺寸和过流保护的一般要求。 允许额定电流或过流保护装置的设置确定了分支电路额定值 (210.18)。电路的安培额定值取决于保护导体的断路器或保险丝的额定值,而…

传统CV算法——图像基本操作与形态学操作

环境配置地址 图像显示 import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB imgcv2.imread(cat.jpg) img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY) img_gray.shape cv2.imshow("img_gray", img_gray) cv2…

SprinBoot+Vue实验室考勤管理微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平…

d3dx9_43.dll文件缺失的具体处理方法,科学分析5种d3dx9_43.dll修复方法

在使用电脑的过程中,尤其是启动某些游戏或程序时,可能会弹出一条错误信息:“无法找到 d3dx9_43.dll”或者“d3dx9_43.dll文件缺失”。这通常表明你的系统中缺少重要的 DirectX 动态链接库(DLL)文件,阻碍了程序的正常运行。本文将提…

GEE数据集:欧美1950-2022年扩展春季指数(SI-x)

目录 高分辨率扩展春季指数数据库 简介 数据集说明 空间信息 代码 代码链接 APP链接 结果 引用 许可 网址推荐 0代码在线构建地图应用 机器学习 高分辨率扩展春季指数数据库 简介 扩展春季指数(SI-x)为研究春季开始的时间及其与气候变化的…