性能优化核心

ArkTS 采用**细粒度更新**机制，仅重新构建依赖变化状态的最小组件单元，而非整个页面，大幅提升渲染效率。

/**
 * 商品列表组件
 * @description 展示商品列表，支持下拉刷新和上拉加载
 */
@Entry
@Component
struct ProductListPage {
  // 列表数据状态
  @State productList: Product[] = [];
  // 加载状态
  @State isLoading: boolean = false;
  // 分页信息
  @State page: number = 1;
  @State hasMore: boolean = true;

  // 页面加载时获取数据
  aboutToAppear() {
    this.loadProductList();
  }

  // 加载商品列表
  async loadProductList() {
    this.isLoading = true;
    const result = await ProductApi.getList(this.page, 20);
    if (this.page === 1) {
      this.productList = result.data;
    } else {
      this.productList = [...this.productList, ...result.data];
    }
    this.hasMore = result.data.length === 20;
    this.isLoading = false;
  }

  // UI描述
  build() {
    Column() {
      // 导航栏
      NavBar({ title: "商品列表" })

      // 商品列表
      List({ space: 10 }) {
        // 下拉刷新
        Refresh({ refreshing: $isLoading })
          .onRefresh(() => {
            this.page = 1;
            this.loadProductList();
          })

        // 列表项
        LazyForEach(this.productList, (item: Product) => {
          ListItem() {
            ProductCard({ product: item })
              .onClick(() => {
                router.pushUrl({
                  url: "pages/product/detail",
                  params: { productId: item.id }
                })
              })
          }
          .reuseId(`product_${item.id}`)
        }, (item: Product) => item.id.toString())

        // 加载更多
        if (this.hasMore) {
          ListItem() {
            LoadingMore()
              .onAppear(() => {
                if (!this.isLoading) {
                  this.page += 1;
                  this.loadProductList();
                }
              })
          }
        }
      }
      .width('100%')
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f5f5f5')
  }
}

// 基础组件属性配置
Text("Hello ArkTS")
  .fontSize(20) // 字体大小
  .fontColor(Color.Red) // 字体颜色
  .fontWeight(FontWeight.Bold) // 字体粗细
  .padding(16) // 内边距
  .backgroundColor(Color.White) // 背景色
  .borderRadius(8) // 圆角
  .shadow({ radius: 4, color: '#1A000000', offsetX: 0, offsetY: 2 }) // 阴影
  .onClick(() => { // 点击事件
    console.log("文本被点击")
  })

// 条件渲染
if (this.isLogin) {
  UserInfoCard({ user: this.userInfo })
} else {
  LoginTip()
}

// 列表渲染
LazyForEach(
  this.dataSource, // 数据源
  (item: ListItemData) => { // 列表项生成函数
    ListItem() {
      Text(item.title)
    }
  },
  (item: ListItemData) => item.id.toString() // 唯一键生成函数
)

// ViewModel示例
@Observed
class ProductListViewModel {
  // 状态数据
  productList: Product[] = [];
  isLoading: boolean = false;
  hasMore: boolean = true;
  page: number = 1;

  // 业务逻辑
  async loadProductList(isRefresh: boolean = false) {
    if (isRefresh) {
      this.page = 1;
    }
    this.isLoading = true;
    try {
      const result = await ProductApi.getList(this.page, 20);
      if (isRefresh) {
        this.productList = result.data;
      } else {
        this.productList = [...this.productList, ...result.data];
      }
      this.hasMore = result.data.length === 20;
      this.page += 1;
    } catch (e) {
      console.error("加载商品列表失败", e);
    } finally {
      this.isLoading = false;
    }
  }
}

// UI层使用
@Entry
@Component
struct ProductListPage {
  // 持有ViewModel实例
  @State vm: ProductListViewModel = new ProductListViewModel();

  build() {
    Column() {
      List({ space: 10 }) {
        Refresh({ refreshing: $vm.isLoading })
          .onRefresh(() => {
            this.vm.loadProductList(true);
          })

        LazyForEach(this.vm.productList, (item: Product) => {
          ListItem() {
            ProductCard({ product: item })
          }
          .reuseId(`product_${item.id}`)
        })
      }
    }
  }
}

性能红线指标

页面首帧渲染时间≤200ms，列表滑动帧率≥55fps，内存占用≤应用总内存的30%，冷启动时间≤1s。

// 标准项目目录结构
src/main/ets/
├── common/                  # 公共资源
│   ├── components/          # 基础公共组件
│   ├── styles/              # 全局样式
│   ├── utils/               # 工具函数
│   ├── constants/           # 常量定义
│   └── types/               # 通用类型定义
├── features/                # 业务特性模块
│   ├── home/                # 首页模块
│   │   ├── components/      # 首页私有组件
│   │   ├── viewmodels/      # 首页ViewModel
│   │   ├── models/          # 首页数据模型
│   │   ├── api/             # 首页接口
│   │   └── pages/           # 首页页面
│   ├── product/             # 商品模块
│   └── user/                # 用户模块
├── router/                  # 路由配置
├── store/                   # 全局状态管理
└── entryability/            # 应用入口配置