介绍

在HarmonyOS的开发中，我们往往会在一个项目中反复的用到同一个或者是类似的样式，我们可以反复的CV很多遍，虽然这样很简单，但是如果客户有新的UI需求，修改起来就是很麻烦的，倒不如直接将其封装起来，在需要使用的地方直接调用就可以，既优化了代码的UI结构，后期维护起来也是很便捷的。

使用

例如下面的例子

      Button('关注')
        .fontSize(20)
        .fontColor(Color.Pink)
        .borderRadius(5)
        .width(200)
        .height(40)
        .onClick(() => {
          //执行关注的逻辑
        })

这是一个很简单的关注按钮，例如我们在浏览一篇文章的时候，有时候会对文章的作者，或者是这篇文章，亦或是对推荐的文章进行关注，这是时候如果不对组件进行封装的话，就是需要复写多遍，因此封装的好处就显现出来了。

接下来我们将介绍几种不同的封装方法,然后举例子我们仍然按照上面的关注按钮

1.自定义组件

@Component
struct followButton {
  @Prop text: string = '' //文字
  @Prop fontcolor: ResourceColor = '' //文字颜色
  @Prop Radius: number = 0 //圆角
  @Prop Width: number = 0 //宽度
  @Prop Height: number = 0 //高度
  onclick: () => void = () => {
  } //点击事件

  build() {
    Button(this.text)
      .fontColor(this.fontcolor)
      .borderRadius(this.Radius)
      .width(this.Width)
      .height(this.Height)
      .onClick(() => {
        this.onclick && this.onclick()
      })
  }
}

然后就是在需要使用的地方引用组件,传入参数即可，这样使用起来也是比较方便的，但是如果是属性比较多的情况下，使用起来就是比较麻烦的。

2.自定义函数builder

和上面的自定义组件的使用起来也是类似的

  @Builder
  followButton(text: string, fontcolor: ResourceColor, Radius: number, Width: number, Height: number,
    onclick: () => void) {
    Column() {
      Button(text)
        .fontColor(fontcolor)
        .borderRadius(Radius)
        .width(Width)
        .height(Height)
        .onClick(() => {
          onclick && onclick()
        })
    }

  }

然后就是在需要使用的地方使用这个组件,并存入参数即可

  this.followButton('关注', Color.Red, 10, 100, 50, () => {
        this.getUIContext().getPromptAction().showToast({ message: '关注成功!' })
      })

区别

自定义函数和组件之间还是有很多区别的,比如在接下来几个方面

1. 自定义函数在抽取UI组件方面比较的轻量,使用起来比较的简介。
2. 自定义组件可以自定义成员的函数，变量和生命周期，但是自定义函数是没有这些功能的。
3. 在自定义组件里面可以通过状态变量直接实现UI的刷新，但是在自定义函数里面需要实现按引用传递参数，从而实现UI的刷新。
4. 因此就是在使用起来,如果UI结构是比较简单的，而且就是不需要动态变化的，还是比较推荐自定义函数的，但是一般使用比较复杂的，或者需要实现UI更新、逻辑交互的还是比较推荐自定义组件，需要我们根据情况来选取。

结语

组件的复用还是有很多好处，可以简化页面的结构，优化一定的性能，因此在开发的时候，如果可以封装以实现组件的复用，还是建议实现复用。