一、 轻松使用@Reusable组件复用装饰器

🎯 一、 轻松使用@Reusable组件复用装饰器

⭐⭐⭐⭐

📌 见解

1️⃣ 与@Component装饰器结合使用❗

2️⃣ @Reusable标记的组件在从组件树中移除时，组件及其对应的JS对象将被放入复用缓存中。❗❗❗

3️⃣ 区分V1 ｜ V2的使用方式

4️⃣ 大多是使用单一组件和组合类型的组件的复用（有创建和销毁的动机）❗❗❗

🧩 拆解

// TODO: 这个是最基础的创建和销毁的例子
@Entry
@Component
struct ReusableCase {
  @State switch: boolean = false;

  build() {
    Column() {
      Button('isShow汉堡黄?')
        .onClick(() => {
          this.switch = !this.switch;
        })

      if (this.switch) {
        ReusableCaseChild({ name: '汉堡黄' })
          .reuseId('ReusableCaseChild')
      }
    }
    .height("100%")
    .width('100%')
  }
}

@Reusable
@Component
struct ReusableCaseChild {
  @State name: string = ''

  aboutToReuse() {
    console.info('复用++++++++++++++++')
  }

  aboutToRecycle(): void {
    console.info('回收++++++++++++++++')
  }

  build() {
    Column() {
      Text(this.name)
        .fontSize(30)
    }
    .borderWidth(1)
    .borderColor(Color.Orange)
    .height(100)
    .justifyContent(FlexAlign.Center)
  }
}

⚠️ 现在周五的 23:39 明天补充List列表和多组件类型的使用case，先去浪了🏄

前往下一篇：🔗 二、 轻松使用@Reusable组件复用装饰器

🌸🌼🌺