HarmonyOS 组件复用 @ReusableV2 装饰器的基本使用

介绍

为了降低反复创建销毁自定义组件带来的性能开销，开发者可以使用@ReusableV2 装饰@ComponentV2 装饰的自定义组件，达成组

件复用的效果。

@ReusableV2 用于装饰 V2 的自定义组件，表明该自定义组件具有被复用的能力。

基本使用

• @ReusableV2 用来装饰 V2 版本的自定义组件
• reuse 是个属性方法，用来表示可以复用的组件的 id，其中有多种使用的方式。

@Entry
@ComponentV2
struct Index {
  build() {
    Column() {
      ReusableV2Component()
        .reuse({reuseId: () => 'reuseComponent'}) // 使用'reuseComponent'作为reuseId
      ReusableV2Component()
        .reuse({reuseId: () => ''}) // 使用空字符串将默认使用组件名'ReusableV2Component'作为reuseId
      ReusableV2Component() // 未指定reuseId将默认使用组件名'ReusableV2Component'作为reuseId
    }
  }
}
@ReusableV2
@ComponentV2
struct ReusableV2Component {
  build() {
  }
}

回收与复用的生命周期

当组件被回收和被复用时，分别是

• aboutToRecycle 回收
• aboutToReuse 复用

另外，组件自身还具有创建和销毁，因此一个可以复用的组件是具有四个关键的生命周期的。

生命周期	描述
aboutToAppear	组件创建
aboutToDisappear	组件销毁
aboutToRecycle	组件被回收
aboutToReuse	组件复用

结合以下代码来理解

@Entry
@ComponentV2
struct Index {
  @Local condition1: boolean = false;
  @Local condition2: boolean = true;

  build() {
    Column() {
      Button('step1. 组件创建')
        .onClick(() => {
          this.condition1 = true;
        })
      Button('step2. 组件回收')
        .onClick(() => {
          this.condition2 = false;
        })
      Button('step3. 组件重用')
        .onClick(() => {
          this.condition2 = true;
        })
      Button('step4. 组件销毁')
        .onClick(() => {
          this.condition1 = false;
        })
      if (this.condition1) {
        NormalV2Component({ condition: this.condition2 })
      }
    }
  }
}

@ComponentV2
struct NormalV2Component {
  @Require @Param condition: boolean;

  build() {
    if (this.condition) {
      ReusableV2Component()
    }
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  aboutToAppear() {
    console.log('aboutToAppear'); // 组件创建时调用
  }

  aboutToDisappear() {
    console.log('aboutToDisappear'); // 组件销毁时调用
  }

  aboutToRecycle() {
    console.log('aboutToRecycle'); // 组件回收时调用
  }

  aboutToReuse() {
    console.log('aboutToReuse'); // 组件复用时调用
  }

  build() {
    Column() {
      Text('ReusableV2Component')
    }
  }
}

效果

当我们依次点击按钮 1、2、3、4 时，控制台输出

复用前的组件内状态变量重置

这一个是个比较复杂和繁琐的知识点，该知识点重要讲解的是当组件被复用时，它身上使用不同装饰器修饰的变量是被重置，还是被保留下来。

@ReusableV2 在复用前会重置组件中的状态变量以及相关的@Computed、@Monitor 的内容。在复用的过程当中，所有的 V2 自定义组件，无论是否被标记了@ReusableV2，都会经历这一个重置过程

装饰器	重置方法
@Local	直接使用定义时的初始值重新赋值。
@Param	如果有外部传入则使用外部传入值重新赋值，否则用本地初始值重新赋值。注意：@Once 装饰的变量同样会被重置初始化一次。
@Event	如果有外部传入则使用外部传入值重新赋值，否则用本地初始值重新赋值。如果本地没有初始值，则生成默认的空实现。
@Provider	直接使用定义时的初始值重新赋值。
@Consumer	如果有对应的@Provider 则直接使用@Provider 对应的值，否则使用本地初始值重新赋值。
@Computed	使用当前最新的值重新计算一次，如果使用到的变量还未被重置，将会使用重置前的值，因此推荐开发者将@Computed 定义在所使用的变量之后。
@Monitor	在上述所有变量重置完成之后触发。重置过程中产生的变量变化不会触发@Monitor 回调，仅更新 IMonitorValue 中的 before 值。重置过程中不产生变化的赋值不会触发@Monitor 的重置。
常量	包括 readonly 的常量，不重置。

@Local

当组件被复用时，@Local 被修饰的变量被重新赋值。

@ComponentV2
@Entry
struct Index {
  @Local isShow1: boolean = true
  build() {
    Column({ space: 10 }) {
      Button('复用/回收')
        .onClick(() => {
          this.isShow1 = !this.isShow1
        })
      if (this.isShow1) {
        Com()
      }
    }
    .width("100%")
    .height("100%")
  }
}


// 一个简单v2版本的组件
@ComponentV2
@ReusableV2
struct Com {
  @Local num: number = 0
  aboutToReuse(): void {
    console.log("复用")
  }
  aboutToRecycle(): void {
    console.log("回收")
  }
  build() {
    Column() {
      Button('Com ' + this.num)
        .onClick(() => {
          this.num++
        })

    }
  }
}

效果

@Param

如果有外部传入则使用外部传入值重新赋值，否则用本地初始值重新赋值。注意：@Once 装饰的变量同样会被重置初始化一次。

@ComponentV2
@Entry
struct Index {
  @Local isShow1: boolean = true
  @Local num: number = 0

  build() {
    Column({ space: 10 }) {
      Button('复用/回收')
        .onClick(() => {
          this.isShow1 = !this.isShow1
        })

      Button("+")
        .onClick(() => {
          this.num++
        })
      if (this.isShow1) {
        Com({ msg: this.num.toString() })
      }
    }
    .width("100%")
    .height("100%")
  }
}

// 一个简单v2版本的组件
@ComponentV2
@ReusableV2
struct Com {
  @Param msg: string = ""

  aboutToReuse(): void {
    console.log("复用")
  }

  aboutToRecycle(): void {
    console.log("回收")
  }

  build() {
    Column() {
      Button('Com ' + this.msg)
    }
  }
}

效果

@Event

如果有外部传入则使用外部传入值重新赋值，否则用本地初始值重新赋值。如果本地没有初始值，则生成默认的空实现。

对于这个功能，没有什么特别的，正常理解即可。

@ComponentV2
@Entry
struct Index {
  @Local isShow1: boolean = true
  @Local num: number = 0

  build() {
    Column({ space: 10 }) {
      Button('复用/回收')
        .onClick(() => {
          this.isShow1 = !this.isShow1
        })

      Button("+")
        .onClick(() => {
          this.num++
        })
      if (this.isShow1) {
        Com({
          msg: this.num.toString(), cb: () => {
            this.num += 10
          }
        })
      }
    }
    .width("100%")
    .height("100%")
  }
}

// 一个简单v2版本的组件
@ComponentV2
@ReusableV2
struct Com {
  @Param msg: string = ""
  @Event cb: () => void = () => {
  }

  aboutToReuse(): void {
    console.log("复用")
  }

  aboutToRecycle(): void {
    console.log("回收")
  }

  build() {
    Column() {
      Button('Com ' + this.msg)
        .onClick(() => {
          this.cb()
        })
    }
  }
}

@Provider

直接使用定义时的初始值重新赋值。

@ComponentV2
@Entry
struct Index {
  @Local isShow1: boolean = true
  @Local num: number = 0

  build() {
    Column({ space: 10 }) {
      Button('复用/回收')
        .onClick(() => {
          this.isShow1 = !this.isShow1
        })

      Button("+")
        .onClick(() => {
          this.num++
        })
      if (this.isShow1) {
        Com()
      }
    }
    .width("100%")
    .height("100%")
  }
}

// 一个简单v2版本的组件
@ComponentV2
@ReusableV2
struct Com {
  @Provider("msg") msg: string = ""

  build() {
    Column() {
      Button('Com ' + this.msg)
        .onClick(() => {
          this.msg += "g"
        })
    }
  }
}

效果

@Consumer

如果有对应的@Provider 则直接使用@Provider 对应的值，否则使用本地初始值重新赋值。

@ComponentV2
@Entry
struct Index {
  @Local isShow1: boolean = true
  @Local num: number = 0

  build() {
    Column({ space: 10 }) {
      Button('复用/回收')
        .onClick(() => {
          this.isShow1 = !this.isShow1
        })

      Button("+")
        .onClick(() => {
          this.num++
        })
      if (this.isShow1) {
        Com()
      }
    }
    .width("100%")
    .height("100%")
  }
}

// 一个简单v2版本的组件
@ComponentV2
@ReusableV2
struct Com {
  @Provider("msg") msg: string = ""

  @Computed
  get plusParam() {
    // msg 会被重置   aaa作为常量 不被重置
    return this.msg + " 666 " + this.aaa
  }

  aaa = 10

  build() {
    Column() {
      Button('Com ' + this.msg + "  " + this.plusParam)
        .onClick(() => {
          this.aaa += 100
          this.msg += "g"
        })
    }
  }
}

@Monitor

在上述所有变量重置完成之后触发。重置过程中产生的变量变化不会触发@Monitor 回调，仅更新 IMonitorValue 中的 before 值。重置过程中不产生变化的赋值不会触发@Monitor 的重置。

关于我们

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。