HarmonyOS鸿蒙学习笔记（14）@ObjectLink的作用

Posted 2023-03-08 郭梧悠

在HarmonyOS鸿蒙学习笔记（12）@Link的作用一文中简单介绍了@Link的作用。其局限性在于@Link是针对某个数据对象进行的整体同步，而当开发者只想针对父组件中某个数据对象的部分信息进行同步时，使用@Link就不能满足要求。如果这些部分信息是一个类对象，就可以使用@ObjectLink配合@Observed来实现。

使用@ObjectLink设置要求
1、@Observed 用于类，如下面代码使用@Observed修饰了ClassA 这个类。

//@Observed 用于类
@Observed
class ClassA 
  public name: string;
  public c: number;
  public id: number;

  constructor(c: number, name: string = 'OK') 
    this.name = name;
    this.c = c;
    this.id = nextID++;
  

2、@ObjectLink 用于变量。@ObjectLink装饰的变量类型必须为类（class type）。类要被@Observed装饰器所装饰，另外@ObjectLink装饰的变量是不可变的（immutable）。属性的改动是被允许的，当改动发生时，如果同一个对象被多个@ObjectLink变量所引用，那么所有拥有这些变量的自定义组件都会被通知去重新渲染。如下代码@ObjectLink修饰的变量a,其类型就是ClassA，而该类就被@Observed标注了。

//子组件ViewA 
@Component
struct ViewA 
  label: string = "ViewA1";
  //`@ObjectLink`装饰的变量类型必须为类（class type）
  @ObjectLink a: ClassA;

  build() 
    Row() 
      Button(`ViewA [$this.label] this.a.c= $this.a.c +1`)
        .onClick(() => 
         //属性的改动是被允许的
          this.a.c += 1;
        )
    .margin( top: 10 )
  

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

//父组件
@Entry
@Component
struct ViewB 
  //
  @State arrA: ClassA[] = [new ClassA(0), new ClassA(0)];

  build() 
    Column() 
      ForEach(this.arrA, (item) => 
        //将数组元素item赋值给ViewA的a属性
        ViewA( label: `#$item.id`, a: item )
      ,
        (item) => item.id.toString()
      )
      //将数组元素item赋值给ViewA的a属性
      ViewA( label: `ViewA this.arrA[first]`, a: this.arrA[0] )
      ViewA( label: `ViewA this.arrA[last]`, a: this.arrA[this.arrA.length-1] )

      Button(`ViewB: reset array`)
        .margin( top: 10 )
        .onClick(() => 
         //重新设置数组
          this.arrA = [new ClassA(0), new ClassA(0)];
        )
      Button(`ViewB: push`)
        .margin( top: 10 )
        .onClick(() => 
          //更新数组
          this.arrA.push(new ClassA(0))
        )
      Button(`ViewB: shift`)
        .margin( top: 10 )
        .onClick(() => 
          //删除数组的一个元素
          this.arrA.shift()
        )
    
  

运行结果如下：

当点击红色矩形框里的按钮任意一个，另外一个红色矩形框的按钮都跟着同步刷新。完成的运行动态图如下：

其原理总结如图：

官方资料：
@ObjectLink简介