@ReusableV2装饰器：V2组件复用

@ReusableV2 // 装饰ComponentV2的自定义组件
@ComponentV2
struct ReusableV2Component {
  @Local message: string = 'Hello World';
  build () {
    Column() {
      Text(this.message)
    }
  }
}

ReusableV2Component1.ets

@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() {
  }
}

ExamplePage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

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

  build() {
    Column({ space: 10 }) {
      Button('step1. appear')
        .width('60%')
        .onClick(() => {
          this.condition1 = true;
        })
      Button('step2. recycle')
        .width('60%')
        .onClick(() => {
          this.condition2 = false;
        })
      Button('step3. reuse')
        .width('60%')
        .onClick(() => {
          this.condition2 = true;
        })
      Button('step4. disappear')
        .width('60%')
        .onClick(() => {
          this.condition1 = false;
        })
      if (this.condition1) {
        NormalV2Component({ condition: this.condition2 })
      }
    }
    .width('100%')
  }
}

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

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

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  aboutToAppear() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToAppear called'); // 组件创建时调用
  }

  aboutToDisappear() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToDisappear called'); // 组件销毁时调用
  }

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToRecycle called'); // 组件回收时调用
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToReuse called'); // 组件复用时调用
  }

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

AboutToRecyclePage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@ObservedV2
class Info {
  @Trace public age: number = 25;
}

const info: Info = new Info();

@Entry
@ComponentV2
struct Index {
  @Local condition: boolean = true;

  build() {
    Column({ space: 10 }) {
      Button('Reuse/Recycle')
        .width('60%')
        .onClick(() => {
          this.condition = !this.condition;
        })
      Button('Change value')
        .width('60%')
        .onClick(() => {
          info.age++;
        })
      if (this.condition) {
        ReusableV2Component()
      }
    }
    .width('100%')
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Local info: Info = info; // 仅做演示使用，并不建议@Local赋值全局变量

  @Monitor('info.age')
  onValChange() {
    hilog.info(DOMAIN, TAG, 'info.age change');
  }

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'aboutToRecycle');
    this.info.age++;
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'aboutToReuse');
    this.info.age++;
  }

  onRender(): string {
    hilog.info(DOMAIN, TAG, 'info.age onRender');
    return this.info.age.toString();
  }

  build() {
    Column() {
      Text(this.onRender())
    }
  }
}

ConditionPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@ObservedV2
class Info {
  @Trace public age: number;

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

@Entry
@ComponentV2
struct Index {
  @Local local: number = 0;
  @Provider('inherit') inheritProvider: number = 100;
  @Local condition: boolean = true;

  build() {
    Column({ space: 10 }) {
      Button('Recycle/Reuse')
        .onClick(() => {
          this.condition = !this.condition;
        })
      Column({ space: 10 }) {
        Text('Variables of parent component')
        Text(`local: ${this.local}`)
          .onClick(() => {
            this.local++;
          })
        Text(`inheritProvider: ${this.inheritProvider}`)
          .onClick(() => {
            this.inheritProvider++;
          })
      }
      .width('80%')
      .borderWidth(2)

      if (this.condition) {
        ReusableV2Component({
          paramOut: this.local,
          paramOnce: this.local,
          changeParam: () => {
            this.local++;
          }
        })
      }
    }
    .width('100%')
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Local val: number = 0;
  @Local info: Info = new Info(25);
  @Param paramLocal: number = 1;
  @Require @Param paramOut: number;
  @Require @Param @Once paramOnce: number;
  @Event changeParam: () => void;
  @Provider('selfProvider') selfProvider: number = 0;
  @Consumer('inherit') inheritConsumer: number = 0;
  @Consumer('selfConsumer') selfConsumer: number = 0;
  noDecoVariable: number = 0; // 未加装饰器，被视作常量
  noDecoInfo: Info = new Info(30); // 未加装饰器，被视作常量
  readonly readOnlyVariable: number = 0; // readonly常量

  @Computed
  get plusParam() {
    return this.paramLocal + this.paramOut + this.paramOnce;
  }

  @Monitor('val')
  onValChange(monitor: IMonitor) {
    hilog.info(DOMAIN, TAG, `val change from ${monitor.value()?.before} to ${monitor.value()?.now}`);
  }

  @Monitor('plusParam')
  onPlusParamChange(monitor: IMonitor) {
    hilog.info(DOMAIN, TAG, `plusParam change from ${monitor.value()?.before} to ${monitor.value()?.now}`);
  }

  build() {
    Column({ space: 10 }) {
      Column({ space: 10 }) {
        Text('Variables reset to local initial values')
        Text(`val: ${this.val}`)
          .onClick(() => {
            this.val++;
          })
        Text(`info.age: ${this.info.age}`)
          .onClick(() => {
            this.info.age++;
          })
        Text(`paramLocal: ${this.paramLocal}`)
          .onClick(() => {
            /* 无外部传入的Local无法本地修改 */
          })
        Text(`selfProvider: ${this.selfProvider}`)
          .onClick(() => {
            this.selfProvider++;
          })
        Text(`selfConsumer: ${this.selfConsumer}`)
          .onClick(() => {
            this.selfConsumer++;
          })
      }
      .width('80%')
      .borderWidth(2)

      Column({ space: 10 }) {
        Text('Reset to an external variable')
        Text(`paramOut: ${this.paramOut}`)
          .onClick(() => {
            this.changeParam();
          })
        Text(`paramOnce: ${this.paramOnce}`)
          .onClick(() => {
            this.paramOnce++;
          })
      }
      .width('80%')
      .borderWidth(2)

      Column({ space: 10 }) {
        Text('Depending on the parent component')
        Text(`inheritConsumer: ${this.inheritConsumer}`)
          .onClick(() => {
            this.inheritConsumer++;
          })
        Text(`plusParam: ${this.plusParam}`)
      }
      .width('80%')
      .borderWidth(2)

      Column({ space: 10 }) {
        Text('Not reset')
        Text(`noDecoVariable: ${this.noDecoVariable}`)
        Text(`noDecoInfo.age: ${this.noDecoInfo.age}`)
          .onClick(() => {
            this.noDecoInfo.age++;
          }) // 能够触发刷新但是复用时不会被重置
        Text(`readOnlyVariable: ${this.readOnlyVariable}`)
      }
      .width('80%')
      .borderWidth(2)
    }
    .width('100%')
  }
}

ComputedPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@ObservedV2
class Info {
  @Trace public age: number;

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

@Entry
@ComponentV2
struct Index {
  @Local condition: boolean = true;

  build() {
    Column({ space: 10 }) {
      Button('Recycle/Reuse')
        .width('60%')
        .onClick(() => {
          this.condition = !this.condition;
        })
      if (this.condition) {
        ReusableV2Component()
      }
    }
    .width('100%')
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  noDecoInfo: Info = new Info(30); // 未加装饰器，被视作常量

  @Monitor('noDecoInfo.age')
  onAgeChange(monitor: IMonitor) {
    hilog.info(DOMAIN, TAG, `age change from ${monitor.value()?.before} to ${monitor.value()?.now}`);
  }

  aboutToRecycle() {
    this.noDecoInfo.age = 25;
  }

  aboutToReuse() {
    this.noDecoInfo.age = 35;
  }

  build() {
    Column() {
      Column() {
        Text(`noDecoInfo.age: ${this.noDecoInfo.age}`)
          .onClick(() => {
            this.noDecoInfo.age++;
          }) // 能够触发刷新但是不会被重置
      }
    }
  }
}

IMonitorValuePage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@Entry
@ComponentV2
struct Index {
  @Local condition: boolean = true;

  build() {
    Column({ space: 10 }) {
      Button('Recycle/Reuse')
        .width('60%')
        .onClick(() => {
          this.condition = !this.condition;
        }) // 点击切换回收/复用状态
      if (this.condition) {
        ReusableV2Component()
      }
    }
    .width('100%')
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Local message: string = 'Hello World';

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToRecycle'); // 回收时被调用
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToReuse'); // 复用时被调用
  }

  build() {
    Column() {
      Text(this.message)
    }
  }
}

ComponentIfPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@Entry
@ComponentV2
struct Index {
  @Local condition: boolean = true;
  @Local simpleList: number[] = [];

  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.simpleList.push(i);
    }
  }

  build() {
    Column() {
      Button('Change condition')
        .onClick(() => {
          this.condition = !this.condition;
        })
      if (this.condition) {
        // 此处仅做演示使用，让复用池中填充3个组件
        ReusableV2Component({ num: 0 })
        ReusableV2Component({ num: 0 })
        ReusableV2Component({ num: 0 })
      }
      List({ space: 10 }) {
        Repeat(this.simpleList)
          .virtualScroll()
          .each((obj: RepeatItem<number>) => {
            ListItem() {
              Column() {
                ReusableV2Component({ num: obj.item })
              }
            }
            .width('100%')
          })
      }.height('50%')
      .cachedCount(2)
    }
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Require @Param num: number;

  aboutToAppear() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToAppear');
  }

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToRecycle');
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToReuse');
  }

  build() {
    Column() {
      Text(`${this.num}`).fontSize(50)
    }
  }
}

RepeatPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@Entry
@ComponentV2
struct Index {
  @Local simpleList: number[] = [1, 2, 3, 4, 5];
  @Local condition: boolean = true;

  build() {
    Column({ space: 10 }) {
      // 点击Button切换condition，删除/创建ReusableV2Component
      Button('Delete/Create Repeat')
        .width('60%')
        .onClick(() => {
          this.condition = !this.condition;
        })
      Button('Add element')
        .width('60%')
        .onClick(() => {
          this.simpleList.push(this.simpleList.length + 1);
        })
      Button('Delete element')
        .width('60%')
        .onClick(() => {
          this.simpleList.pop();
        })
      Button('Change element')
        .width('60%')
        .onClick(() => {
          this.simpleList[0]++;
        })
      if (this.condition) {
        List({ space: 10 }) {
          Repeat(this.simpleList)
            .each((obj: RepeatItem<number>) => {
              ListItem() {
                Column() {
                  ReusableV2Component({ num: obj.item })
                }
                .width('100%')
              }
            })
        }
      }
    }
    .width('100%')
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Require @Param num: number;

  aboutToAppear() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToAppear');
  }

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToRecycle');
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToReuse');
  }

  build() {
    Column() {
      Text(`${this.num}`)
    }
  }
}

ComponentEachPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

@Entry
@ComponentV2
struct Index {
  @Local simpleList: number[] = [0, 1, 2, 3, 4, 5];

  build() {
    Column() {
      ForEach(this.simpleList, (num: number, index) => {
        Row() {
          Button('Click to change')
            .margin({ right: 10 })
            .onClick(() => {
              this.simpleList[index]++;
            })
          ReusableV2Component({ num: num })
        }
        .margin({ bottom: 10 })
      }) // 每次修改完key发生变化
    }
  }
}

@ReusableV2
@ComponentV2
struct ReusableV2Component {
  @Require @Param num: number;

  aboutToAppear() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToAppear', this.num); // 创建时触发
  }

  aboutToRecycle() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToRecycle', this.num); // 回收时触发
  }

  aboutToReuse() {
    hilog.info(DOMAIN, TAG, 'ReusableV2Component aboutToReuse', this.num); // 复用时触发
  }

  build() {
    Column() {
      Text(`child: ${this.num}`)
    }
  }
}

ComponentForEachPage.ets

import { hilog } from '@kit.PerformanceAnalysisKit';

const TAG = '[Sample_Reusablev2]';
const DOMAIN = 0xF811;

class BasicDataSource implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: StringData[] = [];

  public totalCount(): number {
    return 0;
  }

  public getData(index: number): StringData {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      hilog.info(DOMAIN, TAG, 'add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      hilog.info(DOMAIN, TAG, 'remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    });
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    });
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    });
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    });
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    });
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    });
  }
}

class MyDataSource extends BasicDataSource {
  private dataArray: StringData[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): StringData {
    return this.dataArray[index];
  }

  public addData(index: number, data: StringData): void {
    this.dataArray.splice(index, 0, data);
    this.notifyDataAdd(index);
  }

  public pushData(data: StringData): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

@ObservedV2
class StringData {
  @Trace message: string;

  constructor(message: string) {
    this.message = message;
  }
}

@Entry
@ComponentV2
struct Index {
  data: MyDataSource = new MyDataSource(); // 数据源

  aboutToAppear() {
    for (let i = 0; i <= 200; i++) {
      this.data.pushData(new StringData('Hello' + i));
    }
  }

  build() {
    List({ space: 3 }) {
      LazyForEach(this.data, (item: StringData, index: number) => {
        ListItem() {
          Column() {
            Text(item.message)
            ChildComponent({ data: item.message })
              .onClick(() => {
                item.message += '!'; // message为@Trace装饰的变量，可观察变化
              })
          }
        }
      })
    }.cachedCount(5)
  }
}

@ReusableV2
@ComponentV2
struct ChildComponent {
  @Param @Require data: string;

  aboutToAppear(): void {
    hilog.info(DOMAIN, TAG, 'ChildComponent aboutToAppear', this.data);
  }

  aboutToDisappear(): void {
    hilog.info(DOMAIN, TAG, 'ChildComponent aboutToDisappear', this.data);
  }

  aboutToReuse(): void {
    hilog.info(DOMAIN, TAG, 'ChildComponent aboutToReuse', this.data); // 复用时触发
  }

  aboutToRecycle(): void {
    hilog.info(DOMAIN, TAG, 'ChildComponent aboutToRecycle', this.data); // 回收时触发
  }

  build() {
    Row() {
      Text(this.data).fontSize(50)
    }
  }
}

LazyForEachPage.ets