#鸿蒙通关秘籍#如何使用条件渲染和骨架图优化鸿蒙应用的页面加载速度？

对于复杂页面，使用骨架图作为默认展示，运用条件渲染，通过判断数据加载状态优化页面加载时间，使用户不会在数据加载时体验到响应延迟。

@Entry
@Component
struct Index {
  @State simpleList: Array<number> = [1, 2, 3, 4, 5];
  @State isInitialized: boolean = false; 
  @State isClicked: boolean = false;

  build() {
    Column() {
      Button('点击加载')
        .onClick(() => {
          this.isClicked = !this.isClicked;
          setTimeout(() => {
            this.isInitialized = !this.isInitialized;
          }, 300);
        })
      if (this.isClicked) {
        ForEach(this.simpleList, (item: number) => {
          if (!this.isInitialized) {
            ArticleSkeletonView().margin({ top: 20 })
          } else {
            Text('OK')
          }
        }, (item: number) => item.toString())
      }
    }
    .padding(20)
    .width('100%')
    .height('100%')
  }
}