HarmonyOS鸿蒙Next中如何在应用中实现组件复用和组合模式？

关键字：组件复用、组合模式、组件组合、组件抽象、可复用组件

回答

原理解析

组件复用通过抽象通用逻辑和组合小组件构建大组件实现，提高开发效率。

核心概念：

1. 组件抽象：提取通用逻辑
2. 组件组合：小组件组合成大组件
3. Props设计：灵活的属性设计
4. 组件库：可复用的组件集合

详细解决步骤

参考文档06的自定义组件，这里补充组合模式：

1. 基础组件

@Component
export struct Button {
  @Prop text: string = ''
  @Prop onClick?: () => void

  build() {
    Button(this.text)
      .onClick(() => {
        if (this.onClick) {
          this.onClick()
        }
      })
  }
}

1. 组合组件

@Component
export struct Form {
  @Prop onSubmit?: () => void

  build() {
    Column() {
      Input()
      Button({ text: '提交', onClick: this.onSubmit })
    }
  }
}

示例代码

完整示例：组件复用和组合

// 基础组件：输入框
@Component
export struct InputField {
  @Prop label: string = ''
  @Prop placeholder: string = ''
  @State value: string = ''
  private onChange?: (value: string) => void

  build() {
    Column({ space: 5 }) {
      Text(this.label)
        .fontSize(14)
        .fontColor('666666')
      
      TextInput({ placeholder: this.placeholder, text: this.value })
        .onChange((value: string) => {
          this.value = value
          if (this.onChange) {
            this.onChange(value)
          }
        })
    }
    .width('100%')
  }

  setOnChange(handler: (value: string) => void): InputField {
    this.onChange = handler
    return this
  }
}

// 组合组件：表单
@Component
export struct FormComponent {
  @State formData: { name: string, email: string } = { name: '', email: '' }
  private onSubmit?: (data: any) => void

  build() {
    Column({ space: 20 }) {
      InputField({ label: '姓名', placeholder: '请输入姓名' })
        .setOnChange((value: string) => {
          this.formData.name = value
        })
      
      InputField({ label: '邮箱', placeholder: '请输入邮箱' })
        .setOnChange((value: string) => {
          this.formData.email = value
        })
      
      Button('提交')
        .onClick(() => {
          if (this.onSubmit) {
            this.onSubmit(this.formData)
          }
        })
    }
    .width('100%')
    .padding(20)
  }

  setOnSubmit(handler: (data: any) => void): FormComponent {
    this.onSubmit = handler
    return this
  }
}

@Entry
@Component
struct ComponentReuseDemo {
  build() {
    Column({ space: 20 }) {
      Text('组件复用示例')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .padding(20)

      FormComponent()
        .setOnSubmit((data: any) => {
          console.info('提交数据:', data)
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .backgroundColor('F1F3F5')
  }
}

高级用法

1. 高阶组件

function withLoading<T>(Component: T): T {
  // 添加加载状态
  return Component
}

1. 组件插槽

@Component
export struct Card {
  @BuilderParam header?: () => void
  @BuilderParam content?: () => void

  build() {
    Column() {
      if (this.header) {
        this.header()
      }
      if (this.content) {
        this.content()
      }
    }
  }
}

常见问题

Q: 如何提高组件复用性？ A: 抽象通用逻辑、设计灵活的Props、使用组合模式。

Q: 组件组合影响性能吗？ A: 合理组合影响很小，避免过度嵌套。

Q: 如何管理组件库？ A: 使用HAR模块，统一导出组件。

总结：组件复用和组合模式是提高开发效率的关键，合理设计可以大幅减少代码量。