这里写目录标题
- 自定义组件
- 创建自定义组件
- 自定义组件的基本用法
- 自定义组件的基本结构
- 成员函数/变量
- 自定义组件的参数规定
- build()函数
自定义组件
创建自定义组件
自定义组件的基本用法
@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方法中，我们可以创建自定义组件，在创建自定义组件时，可以将父组件的成员变量、函数等传入，供子组件调用。
uild_36">build()函数
所有声明在build()函数中的语句，统称为UI描述，需要遵循以下规则：
-
@Entry装饰的自定义组件，其build函数下必须要有一个根节点，根节点是唯一且必要的，禁止使用ForEach作为根节点。
-
build()函数中禁止声明本地变量。
-
build()函数中禁止直接使用console.info，但是允许在方法或者函数中使用。
-
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及以后得版本中，遵循最小化更新原则，当某个状态变量发生改变时，只有使用到该状态变量的组件会更新，其他组件或该组件内部的组件不会更新。
