[鸿蒙从零到一] ArkUI 声明式渲染管线深度解析：Diff、复用与局部刷新

@Entry
@Component
struct BadKeyExample {
  @State items: string[] = ['A', 'B', 'C'];

  build() {
    Column() {
      ForEach(this.items, (item: string, index: number) => {
        Row() {
          Text(item).fontSize(20)
          TextInput({ placeholder: '输入备注' }).width(150)
        }.margin(10)
      }, (item: string, index: number) => index.toString()) // ❌ 使用索引作为 key

      Button('删除第一项').onClick(() => {
        this.items.shift(); // 删除第一项后，所有索引都改变
      })
    }
  }
}

interface Item {
  id: string;
  name: string;
}

@Entry
@Component
struct GoodKeyExample {
  @State items: Item[] = [
    { id: '1', name: 'A' },
    { id: '2', name: 'B' },
    { id: '3', name: 'C' }
  ];

  build() {
    Column() {
      ForEach(this.items, (item: Item) => {
        Row() {
          Text(item.name).fontSize(20)
          TextInput({ placeholder: '输入备注' }).width(150)
        }.margin(10)
      }, (item: Item) => item.id) // ✅ 使用唯一 id 作为 key

      Button('删除第一项').onClick(() => {
        this.items.shift();
      })
    }
  }
}

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

@Entry
@Component
struct ReuseBenchmark {
  @State items: number[] = Array.from({ length: 1000 }, (_, i) => i);

  build() {
    Column() {
      Button('重新赋值（不复用）').onClick(() => {
        hiTraceMeter.startTrace('NoReuse', 1);
        this.items = Array.from({ length: 1000 }, (_, i) => i); // 新数组，无法复用
        hiTraceMeter.finishTrace('NoReuse', 1);
      })

      Button('原地修改（复用）').onClick(() => {
        hiTraceMeter.startTrace('WithReuse', 2);
        this.items[0] = this.items[0] + 1; // 触发数组引用变化
        this.items = [...this.items]; // 保持元素身份
        hiTraceMeter.finishTrace('WithReuse', 2);
      })

      List() {
        ForEach(this.items, (item: number) => {
          ListItem() {
            Text(`Item ${item}`).fontSize(16)
          }
        }, (item: number) => item.toString())
      }.height('80%')
    }
  }
}

@Component
struct ExpensiveChild {
  aboutToAppear() {
    console.log('ExpensiveChild created'); // 每次创建都会打印
  }

  build() {
    Text('我是昂贵的子组件').fontSize(20)
  }
}

@Entry
@Component
struct ParentComponent {
  @State counter: number = 0;

  build() {
    Column() {
      Text(`计数: ${this.counter}`).fontSize(24)
      ExpensiveChild() // ❌ 每次 counter 变化都会重建
      Button('增加').onClick(() => this.counter++)
    }
  }
}

@Component
struct CounterDisplay {
  @Link counter: number;

  build() {
    Text(`计数: ${this.counter}`).fontSize(24)
  }
}

@Component
struct ExpensiveChild {
  aboutToAppear() {
    console.log('ExpensiveChild created');
  }

  build() {
    Text('我是昂贵的子组件').fontSize(20)
  }
}

@Entry
@Component
struct OptimizedParent {
  @State counter: number = 0;

  build() {
    Column() {
      CounterDisplay({ counter: $counter }) // 只有这个组件刷新
      ExpensiveChild() // ✅ 不会重建
      Button('增加').onClick(() => this.counter++)
    }
  }
}

@Observed
class UserProfile {
  name: string = '';
  avatar: string = '';
  score: number = 0;
}

@Component
struct UserCard {
  @ObjectLink profile: UserProfile;

  build() {
    Row() {
      Image(this.profile.avatar).width(50).height(50)
      Column() {
        Text(this.profile.name).fontSize(18)
        Text(`积分: ${this.profile.score}`).fontSize(14).fontColor(Color.Gray)
      }.alignItems(HorizontalAlign.Start).margin({ left: 10 })
    }
  }
}

@Entry
@Component
struct ProfilePage {
  @State user: UserProfile = new UserProfile();

  aboutToAppear() {
    this.user.name = 'HarmonyOS 开发者';
    this.user.avatar = 'avatar.png';
    this.user.score = 1250;
  }

  build() {
    Column() {
      UserCard({ profile: this.user })
      Button('增加积分').onClick(() => {
        this.user.score++; // 只触发 UserCard 中依赖 score 的 Text 刷新
      })
    }
  }
}