在 ArkUI 框架中。它主要用于 优化组件的实例化过程，避免重复创建相同组件，从而提升性能。

@Reusable 装饰器的作用

@Reusable 用于标记一个组件可以被 复用，即当组件被销毁后，其 实例不会被立即释放，而是被缓存起来，下次需要时直接复用，而不是重新创建。

适用场景

• 列表渲染（ForEach、LazyForEach）：在滚动列表时，频繁创建和销毁组件会影响性能，使用 @Reusable 可以减少重建开销。
• 条件渲染（if/else）：当组件因条件变化频繁显示/隐藏时，复用已有实例。
• 动态组件切换：避免重复实例化相同类型的组件。

如何使用 @Reusable

1. 基本用法

@Reusable// 标记该组件可复用
@Component
struct ReusableComponent {
@Prop message: string;

build() {
Column() {
Text(this.message)
.fontSize(20)
}
}
}

2. 在 ForEach 列表中使用

@Entry
@Component
struct ParentComponent {
@State items: string[] = ["Item 1", "Item 2", "Item 3"];

build() {
List() {
ForEach(this.items, (item: string) => {
ListItem() {
ReusableComponent({ message: item })// 复用组件实例
}
})
}
}
}

3. 在 if/else 条件渲染中使用

@Entry
@Component
struct ToggleComponent {
@State showComponent: boolean = true;

build() {
Column() {
if (this.showComponent) {
ReusableComponent({ message: "Hello!" })// 切换时复用实例
}
Button("Toggle")
.onClick(() => {
this.showComponent = !this.showComponent;
})
}
}
}

@Reusable 与普通组件的区别

注意事项

1. @Reusable 不保证一定复用：鸿蒙系统会根据内存情况决定是否复用，不能强制缓存。
2. 状态管理需谨慎：复用的组件可能保留之前的状态，必要时用 @State、@Prop 或 @Link 管理数据。
3. 不适合所有组件：仅对 高频创建/销毁 的组件使用，滥用可能导致内存占用增加。

总结

• @Reusable 是鸿蒙 ArkUI 提供的组件复用优化方案，适用于列表、条件渲染等高频创建/销毁的场景。
• 与 @Builder、自定义组件等复用方式不同，它更侧重于 性能优化，而不是代码复用。
• 合理使用可提升应用流畅度，但需注意内存和状态管理问题。

如果你的应用有大量动态组件（如长列表、Tab 切换），@Reusable 是一个值得考虑的优化手段！ 🚀