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()
}
```
结尾：性能优化是持续旅程 🛣️
性能优化不是一蹴而就，而是持续迭代的过程。记住三个黄金原则：
- 精准刷新：谁变刷谁，别动全局。
- 主线程轻量化：耗时操作全扔子线程。
- 节点精简：布局层级越浅越好。
希望这些案例能帮你少踩坑！如果有问题，欢迎在评论区讨论。
一起打造极致流畅的鸿蒙应用吧！ 💪
