问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何在 ArkUI 中实现自定义组件？

头像
我是小洪
    11
    新手上路，请多包涵

    想问问大家在 ArkUI 应用开发实践中，针对自定义组件的创建和使用，有哪些最佳实践建议？

    比如说怎么合理地进行组件划分以提高复用性？如何有效地管理自定义组件的状态和生命周期来提升性能和可维护性呢？

    “女性视角下的鸿蒙创新力”线上问答征集活动
    HarmonyOSarkuiharmonyos
    阅读 831
    avatarAI BotBETA

    在ArkUI中实现自定义组件时，建议通过以下最佳实践提升开发效率和质量：

    一、组件划分原则

    1. 单一职责原则
      每个组件专注于单一功能（如按钮/卡片/列表项），推荐按功能模块拆分：

      @Component
struct CustomButton {
  label: string = 'Click'
  onClick: () => void = () => {}

  build() {
 Button(this.label)
   .onClick(() => this.onClick())
  }
}
    2. 层级抽象策略
    3. 基础组件：封装原子级UI元素
    4. 复合组件：组合基础组件形成功能模块
    5. 业务组件：包含具体业务逻辑的顶层组件

    二、状态管理方案

    1. 状态装饰器层级：
    2. @State：组件私有状态
    3. @Prop：父级单向传递
    4. @Link：父子双向绑定
    5. @Observed + @ObjectLink：对象级响应
    @Observed
class UserData {
  name: string = 'John'
}

@Component
struct UserProfile {
  @ObjectLink user: UserData

  build() {
    Text(this.user.name)
  }
}

    三、生命周期优化

    1. 关键生命周期方法：
    2. aboutToAppear：初始化资源
    3. aboutToDisappear：释放资源
    4. onPageShow/onPageHide：页面级事件
    @Component
struct TimerComponent {
  @State count: number = 0
  timerId: number = 0

  aboutToAppear() {
    this.timerId = setInterval(() => {
      this.count++
    }, 1000)
  }

  aboutToDisappear() {
    clearInterval(this.timerId)
  }
}

    四、性能提升技巧

    1. 条件渲染优化

      build() {
  Column() {
 if (this.showHeader) {
   CustomHeader()
 }
 List({ space: 10 }) {
   ForEach(this.items, (item) => {
     ListItem() {
       CustomItem({ data: item })
     }
   })
 }
  }
}

    2. 样式复用方案

      // 公共样式定义
@Styles function cardStyle() {
  .width('90%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(8)
}

// 组件应用
@Component
struct InfoCard {
  build() {
 Column()
   .cardStyle()
  }
}

    五、可维护性建议

    1. 文件结构规范：

      components/
  base/        // 基础组件
  business/    // 业务组件
  utils/       // 工具类组件
styles/
  theme.ets    // 主题定义
  common.ets   // 公共样式
    2. 文档化实践：
    3. 使用TSDoc注释规范
    4. 添加组件Props接口说明
    5. 标注典型使用场景示例

    通过合理运用上述模式，可使自定义组件具备：

    • 高内聚低耦合的特性
    • 清晰的状态管理流程
    • 优化的渲染性能
    • 良好的可维护性和扩展性

    实际开发中应根据具体场景选择最合适的实现方案，同时建议结合ArkUI官方调试工具进行性能分析和优化验证。

    1 个回答
    得票最新
    头像
    蒜头
      3
      新手上路，请多包涵

      我可以回答一下第一个关于合理地进行组件划分以提高复用性的这个问题🙋

      1. 每个组件都应该有明确且单一的职责。单一职责的组件更易于理解、测试和复用。

      假设您要创建一个电商应用的商品列表页，可以将其划分为多个职责单一的组件：

      • ProductListItemComponent: 负责展示单个商品的信息（图片、标题、价格等）。
      • ProductListComponent: 负责管理和渲染商品列表，包括列表布局、数据加载等。
      • ProductFilterComponent: 负责商品筛选和排序功能。
      • LoadMoreButtonComponent: 负责“加载更多”按钮的展示和交互。
      1. 从 UI 结构和功能模块的角度进行组件划分
      2. 区分通用组件和组合组件：
        使用原子组件 ButtonComponent、 TextComponent 和 IconComponent 组合成一个 IconButtonComponent 组件，用于表示带图标的按钮，并在多个页面中复用。 再使用 IconButtonComponent、 TextComponent 等原子组件组合成 NavigationBarButtonComponent 作为导航栏按钮。
      3. 划分组件时，要 考虑组件的独立性， 尽量减少组件之间的耦合，提高组件的独立性和可移植性。 同时，也要 考虑组件的可维护性， 组件划分应该使得代码结构清晰、易于理解和维护。

      使用 Props (属性) 和 Events (事件) 进行父子组件之间的通信，避免子组件直接修改父组件的状态，降低组件之间的耦合度。 使用清晰的组件命名和注释，提高组件的可读性和可维护性。

      以上是我的想法哈，继续蹲其他人的回答。。。

      “女性视角下的鸿蒙创新力”线上问答征集活动
      查看全部 1 个回答
      推荐问题