鸿蒙_关于自定义组件和自定义构建函数的个人理解

通过对ArkUI的不断学习，我们发现想要实现同样的UI界面，可以通过多种不同的方法，最基础的就是简单罗列，将系统UI组件比如Text、Button等依次编写代码，最后组合成复杂的界面；再就是代码复用，当我们的编写的多个页面都使用到了相同的一部分UI代码，每次升级或修复bug都要分别更改所有涉及到的页面，这种工作量就成倍的增加，那么代码复用就是解决这种问题的方法，而代码复用的方式又有多种，我们分别来看一下。

一、自定义组件

通过@Component修饰的一个包含若干UI组件的结构体，编写代码时输入comp后按Tab即可快速生成所需的初始结构，在struct后输入自定义组件的名称，在build里编写UI组件即可，一个最简单的自定义组件示例：

TypeScript 复制代码

@Component
struct TestComp {
  build() {
    /*
    Column(){
      Text('txt');
      Button('btn');
    }
    */
  }
}

我们新建一个TestComponent页面来测试，可以把自定义组件编写到页面下方，还可以多个自定义组件嵌套使用，那么我们可以把某个自定义组件类比为由多个小积木组成的积木模块半成品，页面可以类比为最终的积木成品，多个积木模块半成品之间也可以任意组合，最终结合形成完整的页面。

TypeScript 复制代码

@Entry
@Component
struct TestComponent {
  @State message: string = 'Test Component';

  build() {
    Column({ space: 22 }) {
      Text(this.message)
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.message = 'This is Test Component Page';
        })

      //使用自定义组件
      TestComp()

      //使用自定义组件2
      TestComp2()
        .backgroundColor(Color.Orange)
        .width('100%')
        .margin(10)
        .padding(10)
        .border({ width: 1 })
        .onClick(() => {
          console.log('This is Test Component 2');
        })
    }
    .height('100%')
    .width('100%')
  }
}

//自定义组件
@Component
struct TestComp {
  build() {
    Column({ space: 18 }) {
      Text('Text in TestComp')
      TestComp2() //可以嵌套任意自定义组件
      Button('Button in TestComp')
    }
  }
}

//自定义组件2
@Component
struct TestComp2 {
  build() {
    Text('Text in TestComp2')
  }
}

二、自定义构建函数

通过@Builder修饰的function方法，方法内部包含若干UI组件，一个最简单的自定义构建函数示例：

TypeScript 复制代码

@Builder
function TestBld(){
  //Text('Text in Builder')
}

新建一个页面测试一下，我们发现自定义构建函数也可以嵌套使用，只不过是通过一个特殊修饰的function来实现UI组件的复用，经过测试去掉@Builder就变成了普通的ArkTS函数，函数内部就不能包含UI组件了，反过来一个普通的函数加上@Builder后，该函数内就只能编写组件相关的代码了。我们可以把自定义构建函数理解为一起玩积木的小伙伴们，你分配给某个小伙伴（一个自定义构建函数）组装一个积木模块半成品，他可以自己直接交给你，也可以再转交给另一个小伙伴再完善后交给你，中间经过多个小伙伴任意转交，最终由你组合为最终的页面。

TypeScript 复制代码

@Entry
@Component
struct TestBuilder {
  @State message: string = 'Test Builder';

  build() {
    Column() {
      TestBld()
      TestBld2()
    }
    .height('100%')
    .width('100%')
  }
}

@Builder
function TestBld() {
  Text('Text in Builder')
  TestBld2() //可以嵌套使用
}

@Builder
function TestBld2() {
  Text('Text in Builder 2')
}

三、自定义组件和自定义构建函数混合使用

经过对两种UI代码复用方式的了解，我们不难发现，自定义组件和我们创建的页面很类似，只是缺少了@Entry修饰，相当于对一部分页面结构的直接"模块化抽离"复用的半成品；而自定义构建函数更像是用来生成页面结构的"内部临时加工厂"，他们之间又可以混合嵌套使用，形成"你中有我，我中有你"的使用方式。而自定义组件通过特殊包装可以发布到生态市场供其他用户引入使用，总体来看还是自定义组件灵活性更胜一筹。

如有理解错误，敬请批评指正。