@builder 与 @component 不同的使用场景

最新推荐文章于 2025-06-24 19:04:06 发布

原创最新推荐文章于 2025-06-24 19:04:06 发布 · 889 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#鸿蒙 #harmonyos

1. @Component：组件化开发

作用
@Component 用于定义可复用的自定义组件，是 ArkUI 组件化的核心。每个 @Component 装饰的组件可以包含自己的状态、布局和逻辑，具备完整的生命周期（如 aboutToAppear、aboutToDisappear）。
适用场景
- 需要创建独立功能模块时（如按钮、卡片、列表项等）。
- 需要管理组件内部状态（@State、@Prop、@Link 等状态变量）。
- 需要组合多个基础组件（如 Text、Button、Image）形成复杂 UI。
- 需要跨页面复用的逻辑或 UI 结构。

示例

@Component
struct MyButton {
  @State count: number = 0;

  build() {
    Button(`点击次数: ${this.count}`)
      .onClick(() => {
        this.count++;
      });
  }
}

2. @Builder：UI 片段复用

作用
@Builder 用于定义可复用的 UI 片段，类似于“代码片段”或“模板”。它不具备独立的状态管理能力，主要用于简化重复的 UI 代码。
适用场景
- 需要在组件内部复用 UI 结构（如重复的布局样式）。
- 需要将复杂 UI 拆解为多个可维护的片段。
- 需要动态生成部分 UI（例如根据参数渲染不同内容）。
- 需要全局复用的 UI 模板（通过全局 @Builder 定义）。

示例

@Component
struct MyComponent {
  // 组件内的 @Builder
  @Builder
  iconTextBuilder(text: string) {
    Row() {
      Image($r('app.media.icon'))
        .width(20)
        .height(20)
      Text(text)
        .fontSize(16)
    }
  }

  build() {
    Column() {
      this.iconTextBuilder("首页") // 复用 Builder
      this.iconTextBuilder("设置")
    }
  }
}

关键区别总结

特性	`@Component`	`@Builder`
独立性	独立组件，可包含状态和生命周期	UI 片段，无独立状态和生命周期
状态管理	支持 `@State`、`@Prop`、`@Link` 等	仅能通过参数传递数据
复用范围	跨组件、跨页面复用	组件内复用或全局复用（全局 Builder）
复杂度	适合复杂逻辑和交互	适合简单 UI 组合
性能	可能涉及组件实例化开销	轻量级，直接内联 UI 结构

如何选择？

选择 @Component：
需要封装独立功能、管理状态或需要生命周期的场景（如自定义表单控件、动态列表项）。
选择 @Builder：
需要简化重复 UI 代码、拆分复杂布局，或快速生成参数化 UI 片段（如统一风格的卡片、按钮组合）。

组合使用

在实际开发中，二者通常结合使用：

用 @Component 封装独立组件，内部通过 @Builder 管理重复 UI。
用全局 @Builder 定义跨组件的通用模板（如弹窗样式）。

// 全局 Builder（在单独文件中定义）
@Builder
export function GlobalDialog(title: string) {
  Column() {
    Text(title).fontSize(18)
    // 其他统一样式内容
  }
}

通过合理使用两者，可以提升代码的可维护性和复用性。