自定义组件

创建自定义组件

自定义组件的基本用法

@Component
export struct MyComponent {
  @State message: string = '我是自定义组件';

  build() {
    Row() {
      Text(this.message)
        .onClick(() => {
          this.message = '点击刷新UI';
        })
    }
  }
}

自定义组件的基本结构

• struct：自定义组件基于struct实现，不能有继承关系，对于struct的实例化，可以省略new关键字。
• @Component：@Component装饰器仅能装饰struct关键字声明的数据结构，struct被@Component装饰后具备组件化的能力，一个struct只能被一个@Component装饰。
• build()函数：用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
• @Entry：@Entry装饰的自定义组件可以作为UI页面的入口，在单个页面UI中，最多可以使用一个@Entry装饰一个自定义组件。
• @State：状态变量 使用@State装饰器修饰，该变量的变化，会触发组件UI重绘。

成员函数/变量

自定义组件除了必须要实现build()函数外，还可以实现其他成员函数和变量。

自定义组件的成员函数和变量为私有的，且不建议声明为静态函数/变量。

自定义组件的参数规定

在组件的build方法中，我们可以创建自定义组件，在创建自定义组件时，可以将父组件的成员变量、函数等传入，供子组件调用。

build()函数

所有声明在build()函数中的语句，统称为UI描述，需要遵循以下规则：

• @Entry装饰的自定义组件，其build函数下必须要有一个根节点，根节点是唯一且必要的，禁止使用ForEach作为根节点。

• build()函数中禁止声明本地变量。

• build()函数中禁止直接使用console.info，但是允许在方法或者函数中使用。

• build()函数中不允许创建本地作用域，即build()函数中不能直接套{}

• build()函数中，不允许直接调用没有@Builder装饰的方法，允许系统组件的参数是TS方法的返回值。

  @Component
  struct ParentComponent {
    doSomeCalculations() {
    }
  
    calcTextValue(): string {
      return 'Hello World';
    }
  
    @Builder doSomeRender() {
      Text(`Hello World`)
    }
  
    build() {
      Column() {
        // 反例：不能调用没有用@Builder装饰的方法
        this.doSomeCalculations();
        // 正例：可以调用
        this.doSomeRender();
        // 正例：参数可以为调用TS方法的返回值
        Text(this.calcTextValue())
      }
    }
  }
  

• build()函数中不允许使用switch语法，可以使用if语法。

• build()函数中不允许使用?:表达式

• build()函数中不允许直接改变状态变量的值

  在ArkUI中，状态驱动UI更新，所以不能在build()函数或者@Builder方法中直接改变状态变量，这样可能会造成循环渲染的风险。
  在API8及以前，ArkUI是全量更新的，直接改变状态变量，可能会陷入无限循环重新渲染中。
  在API9及以后得版本中，遵循最小化更新原则，当某个状态变量发生改变时，只有使用到该状态变量的组件会更新，其他组件或该组件内部的组件不会更新。