组件及装饰器

首先在ArkTS中存在着内置组件和自定义组件。

以官方给的代码为例

内置组件在HelloWorld案例中就已经体现出来了，用来展示HelloWorld字符串的文本组件就是一个很典型的内置组件

自定义组件，在代码示例中有三个，这里就拿 src/main/ets/view/ListItemComponent.ets 文件中的代码来举例

自定义组件的结构 和 相关装饰器

其中，@Component 就是一种装饰器，它表示自定义组件。用该装饰器修饰的 struct ListItemComponent 代表一个自定义的结构体，名字是 ListItemComponent，它是一个可重复使用的UI单元，可以与其他组件组合

@State 也是一个装饰器，被它修饰的变量在发生改变时，会触发改变量所对应的自定义组件的UI界面进行自动刷新

UI描述，指的是 build() 函数的一整个函数体

系统提供了丰富的内置组件，但是在进行UI开发时，为了提升开发和维护效率，通常会将一些内置组件进行抽象，组合成自定义组件，方便在其他页面中灵活高效的使用

那么，系统是怎么知道这是一个自定义组件的呢？

我们通过使用@Component装饰器和struct关键字，对自定义组件进行修饰。struct是组件的数据结构，装饰器@Component是组件化的标志.

同时我们也定义了build方法，这样自定义组件就具有了组件化的能力，成为了一个独立的自定义组件

@Entry 装饰器

src/main/ets/pages/RankPage.ets 中还使用了 @Entry 装饰器，该装饰器的作用是：将被其装饰的自定义组件用作页面的默认入口，加载页面时，将首先创建并呈现 @Entry 装饰的自定义组件。一个页面有且仅能有一个 @Entry 装饰器，只有被@Entry修饰的组件或者其子组件才会在页面上显示

组件的导入 和 导出

@Builder 装饰器

@Builder 装饰的方法用于定义组件的声明式UI描述，在一个自定义组件内快速生成多个布局内容。

被 @Builder 装饰的方法说白了就是一个比自定义组件还要简单的自定义组件（更加轻量级）

官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/arkts-builder-0000001524176981-V2