状态管理之复杂对象

news2025/2/4 8:47:11

        前面我们学习的@State、@Prop、@Link、@Provide、@Consume这些装饰器都只能更新对象的直接赋值、对象属性赋值；如果对象的属性又是一个对象，也就是嵌套对象，那么对嵌套对象的属性的更新是不会被观察到的，所以复杂状态管理用于解决该问题。

        对于复杂对象可以用@ObjectLink、@Observed解决嵌套对象的更新，二维数组，或者数组项class，或者class的属性是class，他们的第二层的属性变化可以用该方式解决。

1、概述

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

  • 被@Observed装饰的类，可以被观察到属性的变化；
  • 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
  • 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。
  • 使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。
  • @ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。
  • @ObjectLink的属性是可以改变的，但是变量的分配是不允许的，也就是说这个装饰器装饰变量是只读的，不能被改变。同时被装饰的变量不允许有初始值，初值必需从父组件初始化。

2、观察变化和行为表现 

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

class ClassA {
  public c: number;

  constructor(c: number) {
    this.c = c;
  }
}

@Observed
class ClassB {
  public a: ClassA;
  public b: number;

  constructor(a: ClassA, b: number) {
    this.a = a;
    this.b = b;
  }
}

        以上示例中，ClassB被@Observed装饰，其成员变量的赋值的变化是可以被观察到的，但对于ClassA，没有被@Observed装饰，其属性的修改不能被观察到。

@ObjectLink b: ClassB

// 赋值变化可以被观察到
this.b.a = new ClassA(5)
this.b.b = 5

// ClassA没有被@Observed装饰，其属性的变化观察不到
this.b.a.c = 5

        @ObjectLink：@ObjectLink只能接收被@Observed装饰class的实例，可以观察到：

  • 其属性的数值的变化，其中属性是指Object.keys(observedObject)返回的所有属性
  • 如果数据源是数组，则可以观察到数组item的替换，如果数据源是class，可观察到class的属性的变化。

3、框架行为

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

4、嵌套对象


let NextID: number = 1;

/**
 * @Observed 使ClassA属性的变化能被观察到
 */
@Observed
class ClassA {
  public id: number;
  public c: number;

  constructor(c: number) {
    this.id = NextID++;
    this.c = c;
  }
}

@Observed
class ClassB {
  public a: ClassA;

  constructor(a: ClassA) {
    this.a = a;
  }
}

@Component
struct ViewA {
  label: string = 'ViewA1';
  @ObjectLink a: ClassA;

  build() {
    Row() {
      Button(`ViewA [${this.label}] this.a.c=${this.a.c} +1`)
        .onClick(() => {
          this.a.c += 1;
        })
    }
  }
}

/**
 * 嵌套对象变化监听
 */
@Entry
@Component
struct NestObjectDemoPage {
  @State b: ClassB = new ClassB(new ClassA(0));

  build() {
    Column({ space: 10 }) {
      ViewA({ label: 'ViewA #1', a: this.b.a })
      ViewA({ label: 'ViewA #2', a: this.b.a })

      Button(`ViewB: this.b.a.c+= 1`)
        .onClick(() => {
          //嵌套属性变化
          this.b.a.c += 1;
        })
      Button(`ViewB: this.b.a = new ClassA(0)`)
        .onClick(() => {
          //属性对象赋值
          this.b.a = new ClassA(0);
        })
      Button(`ViewB: this.b = new ClassB(ClassA(0))`)
        .onClick(() => {
          //对象赋值
          this.b = new ClassB(new ClassA(0));
        })
    }.margin({top: 48})
  }
}

        

        该示例演示了对象赋值、对象属性赋值、嵌套对象属性赋值的行为观察，这些行为都能及时的观察到并触发UI更新。 

5、对象数组

// objectLinkNestedObjects.ets
let id: number = 1;

/**
 * @Observed 使ClassA2属性的变化能被观察到
 */
@Observed
class ClassA2 {
  public id: number;
  public c: number;

  constructor(c: number) {
    this.id = id++;
    this.c = c;
  }
}

@Component
struct ViewA2 {
  // 子组件ViewA的@ObjectLink的类型是ClassA
  @ObjectLink a: ClassA2;
  label: string = 'ViewA1';

  build() {
    Row() {
      Button(`ViewA [${this.label}] this.a.c = ${this.a.c} +1`)
        .onClick(() => {
          this.a.c += 1;
        })
    }
  }
}

/**
 * 对象数组变化监听
 */
@Entry
@Component
struct ObjectArrayDemoPage {
  // ViewB中有@State装饰的ClassA[]
  @State arrA: ClassA2[] = [new ClassA2(0), new ClassA2(0)];

  build() {
    Column({ space: 10 }) {
      ForEach(this.arrA,
        (item: ClassA2) => {
          ViewA2({ label: `#${item.id}`, a: item })
        },
        (item) => item.id.toString()
      )
      // 使用@State装饰的数组的数组项初始化@ObjectLink，其中数组项是被@Observed装饰的ClassA的实例
      ViewA2({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })
      ViewA2({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })

      Button(`ViewB: reset array`)
        .onClick(() => {
          //数组赋值
          this.arrA = [new ClassA2(0), new ClassA2(0)];
        })
      Button(`ViewB: push`)
        .onClick(() => {
          //数组的变化[在数组末尾加一个元素]
          this.arrA.push(new ClassA2(0))
        })
      Button(`ViewB: shift`)
        .onClick(() => {
          //数组的变化[在数组头部删除一个元素]
          this.arrA.shift()
        })
      Button(`ViewB: chg item property in middle`)
        .onClick(() => {
          //数组中对象属性的赋值
          this.arrA[Math.floor(this.arrA.length / 2)].c = 10;
        })
      Button(`ViewB: chg item object in middle`)
        .onClick(() => {
          //对象数组的赋值
          this.arrA[Math.floor(this.arrA.length / 2)] = new ClassA2(11);
        })
    }.margin({top: 48})
  }
}

     案例分析：

  • this.arrA[Math.floor(this.arrA.length/2)] = new ClassA(..) ：该状态变量的改变触发2次更新：
    1. ForEach：数组项的赋值导致ForEach的itemGenerator被修改，因此数组项被识别为有更改，ForEach的item builder将执行，创建新的ViewA组件实例。
    2. ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })：上述更改改变了数组中第一个元素，所以绑定this.arrA[0]的ViewA将被更新；
  • this.arrA.push(new ClassA(0)) ： 将触发2次不同效果的更新：
    1. ForEach：新添加的ClassA对象对于ForEach是未知的itemGenerator，ForEach的item builder将执行，创建新的ViewA组件实例。
    2. ViewA({ label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] })：数组的最后一项有更改，因此引起第二个ViewA的实例的更改。对于ViewA({ label: `ViewA this.arrA[first]`, a: this.arrA[0] })，数组的更改并没有触发一个数组项更改的改变，所以第一个ViewA不会刷新。
  • this.arrA[Math.floor(this.arrA.length/2)].c：@State无法观察到第二层的变化，但是ClassA被@Observed装饰，ClassA的属性的变化将被@ObjectLink观

6、二维数组

@Observed
class StringArray extends Array<String> {
}

@Component
struct ItemPage {
  @ObjectLink
  itemArr: StringArray;

  private scroller: Scroller = new Scroller()
  build() {
    Scroll(this.scroller) {
      Row() {
        Text('ItemPage')
          .width(100).height(100)

        ForEach(this.itemArr,
          item => {
            Text(item)
              .width(100).height(100)
          },
          item => item
        )
      }
    }.scrollable(ScrollDirection.Horizontal)
  }
}

/**
 * 二维数组变化监听，[bug]发现有性能问题
 */
@Entry
@Component
struct NestedObjectDemo2Page {
  @State arr: Array<StringArray> = [new StringArray(), new StringArray(), new StringArray()];

  build() {
    Column() {
      ItemPage({ itemArr: this.arr[0] })
      ItemPage({ itemArr: this.arr[1] })
      ItemPage({ itemArr: this.arr[2] })

      Divider()

      ForEach(this.arr,
        (itemArr: StringArray, index: number) => {
          ItemPage({ itemArr: itemArr })
        },
        itemArr => itemArr[0]
      )

      Divider()

      Button('update')
        .onClick(() => {
          console.error('Update all items in arr');
          if (this.arr[0][0] !== undefined) {
            // 正常情况下需要有一个真实的ID来与ForEach一起使用，但此处没有
            // 因此需要确保推送的字符串是唯一的。
            this.arr[0].push(`${this.arr[0].slice(-1).pop()}${this.arr[0].slice(-1).pop()}`);
            this.arr[1].push(`${this.arr[1].slice(-1).pop()}${this.arr[1].slice(-1).pop()}`);
            this.arr[2].push(`${this.arr[2].slice(-1).pop()}${this.arr[2].slice(-1).pop()}`);
          } else {
            this.arr[0].push('Hello');
            this.arr[1].push('World');
            this.arr[2].push('!');
          }
        })
    }.margin({top: 48})
  }
}

        使用new StringArray()来构造StringArray的实例，new运算符使得@Observed生效，@Observed观察到StringArray的属性变化。

        声明一个从Array扩展的类class StringArray extends Array<String> {}，并创建StringArray的实例。@Observed装饰的类需要使用new运算符来构建class实例。

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

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

相关文章

《A++ 敏捷开发》-1 如何改善

《A++ 敏捷开发》-1 如何改善

1 如何改善 敏捷开发过程改进案例 5月 A公司一直专门为某电信公司提供针对客服、线上播放等服务。 张工是公司的中层管理者&#xff0c;管理好几个开发团队&#xff0c;有5位项目经理向他汇报。 他听说老同学的团队都开始用敏捷开发&#xff0c;很感兴趣&#xff0c;便参加了…
阅读更多...
15个热门的开源数据可视化项目

15个热门的开源数据可视化项目

数据可视化(即 BI仪表盘)是图形表示的数据。它涉及产生将表示的数据之间的关系传达给图像查看者的图像。这种通信是通过在可视化过程中使用图形标记和数据值之间的系统映射来实现的。该映射建立了如何在视觉上表示数据值，确定图形标记的属性（例如大小或颜色）如何以及在多大程…
阅读更多...
在线客服系统性价比比较：哪家更适合您的需求？

在线客服系统性价比比较：哪家更适合您的需求？

众多的在线客服系统中&#xff0c;哪家性价比更高&#xff1f;这大概是很多企业要考虑和考量的问题。如果您是一名公司采购人员&#xff0c;正在寻找一款功能全面、价格合适的在线客服系统&#xff0c;那么这篇文章或许能为您提供一些参考价值。 Zoho Desk工单管理系统&#x…
阅读更多...
全新揭秘：Java WebSocket全双工通信的实践与运用

全新揭秘：Java WebSocket全双工通信的实践与运用

全新揭秘&#xff1a;Java WebSocket全双工通信的实践与运用 一、简介何为全双工通信全双工&#xff1f;WebSocket的使用场景 二、如何使用Java实现WebSocket1&#xff0c;引用websocket相关starter2&#xff0c;启用websocket3&#xff0c;服务端代码开发4&#xff0c;群发测试…
阅读更多...
文献速递：生成对抗网络医学影像中的应用——基于CycleGAN的图像到图像转换，用于逼真的外科手术训练模型

文献速递：生成对抗网络医学影像中的应用——基于CycleGAN的图像到图像转换，用于逼真的外科手术训练模型

文献速递&#xff1a;生成对抗网络医学影像中的应用——基于CycleGAN的图像到图像转换&#xff0c;用于逼真的外科手术训练模型 本周给大家分享文献的主题是生成对抗网络&#xff08;Generative adversarial networks, GANs&#xff09;在医学影像中的应用。文献的研究内容包括…
阅读更多...
【3D】designdoll 人偶生图 入门到精通 //必看课程

【3D】designdoll 人偶生图 入门到精通 //必看课程

二种方法&#xff0c;根据 desigon doll 生成图片 文生图&#xff1a;tilelineart 图生图&#xff1a;openposedepth best quality,masterpiece,8k,1 girl,flame,black stockings,blush,glasses,pantyhose,competition school swimsuit,magic circle, designdoll 下载模型 查找…
阅读更多...
UE5 Landscape 制作GIS卫星图地形

UE5 Landscape 制作GIS卫星图地形

1. 总体想法&#xff1a; 制作GIS地形&#xff0c;使用Landscaping MapBox是一个好方法&#xff0c;但是区域过大&#xff0c;会占用很多内存 https://blog.csdn.net/qq_17523181/article/details/135029614 如果采用QGis&#xff0c;导出卫星图&#xff0c;在UE5里拼合出地形…
阅读更多...
[数据结构进阶 C++] 二叉搜索树(BinarySearchTree)的模拟实现

[数据结构进阶 C++] 二叉搜索树(BinarySearchTree)的模拟实现

文章目录 1、二叉搜索树1.1 二叉搜索数的概念1.2 二叉搜索树的操作1.2.1 二叉搜索树的查找1.2.2 二叉搜索树的插入1.2.3 二叉搜索树的删除 2、二叉搜索树的应用2.1 K模型2.2 KV模型 3、二叉搜索树的性能分析4、K模型与KV模型完整代码4.1 二叉搜索树的模拟实现&#xff08;K模型…
阅读更多...
养老院自助饮水机（字符设备驱动）

养老院自助饮水机（字符设备驱动）

目录 1、项目背景 2、驱动程序 2.1 三层架构 2.2 驱动三要素 2.3 字符设备驱动 2.3.1 驱动模块 2.3.2 应用层 3、设计实现 3.1 项目设计 3.2 项目实现 3.2.1 驱动模块代码 3.2.2 用户层代码 4、功能特性 5、技术分析 6. 总结与未来展望 1、项目背景 养老院的老人…
阅读更多...
CSC访问学者/博士后/联培博士如何规划申请时间

CSC访问学者/博士后/联培博士如何规划申请时间

申请国家留学基金委&#xff08;CSC&#xff09;公派访问学者/博士后/联合培养博士等出国项目&#xff0c;邀请函是必要条件&#xff0c;需提前准备。那么&#xff0c;何时提出申请比较合适&#xff1f;获得邀请函需要多长时间&#xff1f;根据知识人网多年的申请经验&#xff…
阅读更多...
电影《名侦探柯南：黑铁的鱼影》观后感

电影《名侦探柯南：黑铁的鱼影》观后感

上周看了电影《名侦探柯南&#xff1a;黑铁的鱼影》,整体故事的话,就是柯南他们团队一起去岛屿去上参观&#xff0c;“正好”碰上了“海上信标案件”&#xff0c;在柯南的电影里&#xff0c;用“正好”多少有些反讽的意味&#xff0c;因为柯南好像走到哪&#xff0c;都正好碰到…
阅读更多...
Python实验报告十一、自定义类模拟三维向量及其运算

Python实验报告十一、自定义类模拟三维向量及其运算

一、实验目的&#xff1a; 1、了解如何定义一个类。 2、了解如何定义类的私有数据成员和成员方法。 3、了解如何使用自定义类实例化对象。 二、实验内容&#xff1a; 定义一个三维向量类&#xff0c;并定义相应的特殊方法实现两个该类对象之间的加、减运算&#xff08;要…
阅读更多...
Vue中为什么data属性是一个函数而不是一个对象？（看完就会了）

Vue中为什么data属性是一个函数而不是一个对象？（看完就会了）

文章目录 一、实例和组件定义data的区别二、组件data定义函数与对象的区别三、原理分析四、结论 一、实例和组件定义data的区别 vue实例的时候定义data属性既可以是一个对象&#xff0c;也可以是一个函数 const app new Vue({el:"#app",// 对象格式data:{foo:&quo…
阅读更多...
优化企业员工管理的利器——ADManager Plus

优化企业员工管理的利器——ADManager Plus

在当今数字化的商业环境中&#xff0c;企业员工管理是组织成功运营的关键组成部分。为了提高效率、确保安全性和满足法规合规性要求&#xff0c;企业需要一种强大的工具来简化和集中管理其活跃目录&#xff08;Active Directory&#xff09;环境。ADManager Plus作为一款功能丰…
阅读更多...
利用ffmpeg cv2取h265码流视频（转换图片灰屏问题解决)

利用ffmpeg cv2取h265码流视频（转换图片灰屏问题解决)

利用海康威视相机拍出来的视频是H265格式的&#xff0c;相比于常规的H264编码&#xff0c;压缩率更高&#xff0c;但因此如果直接用正常取流方法读取&#xff0c;会出现无法读取的情况 1. 如图h265码流取出图片为灰屏 2 、解决灰屏问题 import subprocess import cv2# 将h265流…
阅读更多...
天津web前端就业培训班，Web机构选择重点

天津web前端就业培训班，Web机构选择重点

Web前端培训是目前非常热门的培训领域之一。很多领域都会涉及到web前端开发&#xff0c;比如传统互联网、房地产、金融、游戏、影视传媒等行业都需要web前端技术的支持。越来越多的企业和个人也需要建立自己的网站和移动应用程序&#xff0c;因此市场对web前端工程师的需求是非…
阅读更多...
RabbitMQ笔记(基础篇)

RabbitMQ笔记(基础篇)

RabbitMQ笔记_基础篇 MQ基本概念1. MQ概述2. MQ的优势和劣势2.1 优势☆2.2 劣势2.3 使用 MQ 需要满足什么条件呢&#xff1f; 3. 常见的MQ产品 RabbitMQ基本介绍1. RabbitMQ 基础架构2. RabbitMQ 中的相关概念3. RabbitMQ的6 种工作模式☆4. AMQP 和 JMS4.1 AMQP4.2 JMS4.3 AMQ…
阅读更多...
文件夹数据同步工具 Sync Folders Pro mac支持选项

文件夹数据同步工具 Sync Folders Pro mac支持选项

Sync Folders Pro for Mac 是一款功能强大的文件夹同步工具&#xff0c;旨在帮助用户在 Mac 计算机和移动设备之间创建双向同步。这款软件支持各种文件系统和设备&#xff0c;如 iPhone&#xff0c;iPad&#xff0c;iPod&#xff0c;Android 等。通过这款软件&#xff0c;用户可…
阅读更多...
[c]超半的数

[c]超半的数

题目意思很简单&#xff0c;就是输入一组数据&#xff0c;输出出现次数过半的数 根据这个题我们也可以写出另一个题&#xff0c;&#xff08;题2&#xff09;&#xff08;统计一组数据中各个数出现的次数&#xff09; 下面附上两个题代码 题1&#xff1a; #include<stdio.…
阅读更多...
【C语言】自定义类型：结构体深入解析（二）结构体内存对齐宏offsetof计算偏移量结构体传参

【C语言】自定义类型：结构体深入解析（二）结构体内存对齐宏offsetof计算偏移量结构体传参

文章目录 &#x1f4dd;前言&#x1f320; 结构体内存对齐&#x1f309;内存对齐包含结构体的计算&#x1f320;宏offsetof计算偏移量&#x1f309;为什么存在内存对⻬?&#x1f320; 结构体传参&#x1f6a9;总结 &#x1f4dd;前言 本小节&#xff0c;我们学习结构的内存对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023