鸿蒙5开发宝藏案例分享---应用性能优化指南

1. 控制状态刷新 🔄

核心思想：状态变量是UI刷新的触发器，滥用会导致性能劣化。
优化策略：

• 精简状态变量：
  普通变量别用 @State 装饰，避免不必要的渲染。

// ❌ 冗余状态变量  
@State count: number = 0;  

// ✅ 改用普通变量  
private count: number = 0;

• 最小化状态共享范围：
  按需选择装饰器：

• • 组件内独享 → @State
  • 父子组件共享 → @Prop/@Link
  • 跨层级共享 → @Provide/@Consume

// 父子组件共享示例  
@Component  
struct Parent {  
  @State message: string = "Hello";  
  build() {  
    Column() {  
      Child({ msg: this.message }) // 通过@Prop传递  
    }  
  }  
}  

@Component  
struct Child {  
  @Prop msg: string; // 子组件接收  
  build() {  
    Text(this.msg)  
  }  
}

• 精准刷新监听：
  用 @Watch 监听数据变化，避免全局刷新。

@State @Watch('onCountChange') count: number = 0;  

onCountChange() {  
  if (this.count > 10) this.updateUI(); // 条件触发刷新  
}

2. 控制渲染范围 🎯

核心思想：减少不必要的组件渲染和布局计算。
优化策略：

• 懒加载长列表：
  用 LazyForEach 替代 ForEach，只渲染可视区域。

LazyForEach(this.data, (item) => {  
  ListItem({ item })  
}, (item) => item.id)

• 组件复用：
  相同布局的自定义组件通过 reuseId 复用节点。

@Component  
struct ReusableItem {  
  @Reusable reuseId: string = "item_template"; // 标识可复用  
  build() { ... }  
}

• 分帧渲染：
  大数据量分批次渲染，避免主线程阻塞。

// 分帧加载1000条数据  
loadDataBatch(start: number) {  
  const batch = data.slice(start, start + 20);  
  requestAnimationFrame(() => this.renderBatch(batch));  
}

3. 优化组件绘制 ✏️

核心思想：减少布局计算和属性注册开销。
优化策略：

• 避免生命周期内耗时操作：
  aboutToAppear() 中别做网络请求等重操作。

aboutToAppear() {  
  // ❌ 避免  
  heavyNetworkRequest();  

  // ✅ 改用异步  
  setTimeout(() => heavyNetworkRequest(), 0);  
}

• 固定宽高减少计算：
  明确尺寸的组件避免自适应布局。

// ✅ 固定宽高跳过Measure阶段  
Image($r("app.media.icon"))  
  .width(100).height(100)

4. 使用并发能力 ⚡

核心思想：主线程只负责UI，耗时任务交给子线程。
优化策略：

• 多线程处理：
  CPU密集型用 TaskPool，I/O密集型用 Worker。

// TaskPool示例  
import { taskpool } from '@ohos.taskpool';  

@Concurrent  
function computeHeavyTask() { ... }  

taskpool.execute(computeHeavyTask).then((res) => {  
  // 更新UI  
});

• 异步优化：
  用 Promise 或 async/await 避免阻塞。

async loadData() {  
  const data = await fetchData(); // 异步请求  
  this.updateUI(data);  
}

5. 减少布局节点 🌳

核心思想：节点越少，渲染越快。
优化策略：

• 用 @Builder 替代轻量组件：
  无状态组件用 @Builder 更高效。

@Builder  
function IconButton(icon: Resource) {  
  Button() {  
    Image(icon)  
  }  
}  

// 调用  
IconButton($r("app.media.home"))

• 删除冗余容器：
  移除不必要的 Stack/Column/Row 嵌套。

// ❌ 冗余嵌套  
Column() {  
  Column() {  
    Text("Hello")  
  }  
}  

// ✅ 扁平化  
Text("Hello")

6. 延时触发操作 ⏳

核心思想：非关键操作延迟执行，提升启动速度。
优化策略：

• 动态加载模块：
  用 import() 按需加载资源。

// 点击时才加载模块  
Button("Load Feature")  
  .onClick(async () => {  
    const module = await import("./HeavyModule");  
    module.run();  
  })

7. 优化动画帧率 🎞️

核心思想：60fps是流畅动画的生命线。
优化策略：

• 使用系统动画组件：
  优先用 animateTo 而非手动控制帧。

animateTo({ duration: 300 }, () => {  
  this.rotateAngle = 90; // 系统自动插值  
})

• 减少动画复杂度：
  用 transform 替代 top/left 避免重排。

// ✅ GPU加速  
Image($r("app.media.logo"))  
  .transform({ rotate: this.angle })

8. 感知流畅优化 ✨

核心思想：用户感知 > 真实性能。
优化策略：

• 预加载关键资源：
  启动时预先加载首屏图片/数据。

aboutToAppear() {  
  preloadImages(["/res/image1.png", "/res/image2.png"]);  
}

• 骨架屏占位：
  数据加载前展示占位UI。

if (this.isLoading) {  
  LoadingSkeleton() // 骨架屏组件  
} else {  
  RealContent()  
}

结尾：性能优化是持续旅程 🛣️

性能优化不是一蹴而就，而是持续迭代的过程。记住三个黄金原则：

1. 精准刷新：谁变刷谁，别动全局。
2. 主线程轻量化：耗时操作全扔子线程。
3. 节点精简：布局层级越浅越好。

希望这些案例能帮你少踩坑！如果有问题，欢迎在评论区讨论。

一起打造极致流畅的鸿蒙应用吧！ 💪