代码拉取完成，页面将自动刷新
@Component 装饰的struct表示该结构体具有组件化能力，能够成为一个独立的组件，这种类型的组件也称为自定义组件。
该组件可以组合其他组件，它通过实现build方法来描述UI结构，其必须符合Builder的接口约束，该接口定义如下：
interface Builder {
build: () => void
}
用户定义的组件具有以下特点：
可组合：允许开发人员组合使用内置组件和其他组件，以及公共属性和方法；
可重用：可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用；
有生命周期：生命周期的回调方法可以在组件中配置，用于业务逻辑处理；
数据驱动更新：可以由状态数据驱动，实现UI自动更新。
组件生命周期主要包括aboutToAppear和aboutToDisappear回调函数，有关规范，请参见“组件生命周期回调函数”章节。
组件必须遵循上述Builder接口约束，其他组件在内部的build方法中以声明式方式进行组合，在组件的第一次创建和更新场景中都会调用build方法。
组件禁止自定义构造函数。
如下代码定义了MyComponent组件**：**
@Component
struct MyComponent {
build() {
Column() {
Text('my component')
.fontColor(Color.Red)
}.alignItems(HorizontalAlign.Center) // center align Text inside Column
}
}
MyComponent的build方法会在初始渲染时执行，此外，当组件中的状态发生变化时，build方法将再次执行。
以下代码使用了MyComponent组件：
@Component
struct ParentComponent {
build() {
Column() {
MyComponent()
Text('we use component')
.fontSize(20)
}
}
}
可以多次嵌入MyComponent，并嵌入到不同的组件中进行重用：
@Component
struct ParentComponent {
build() {
Row() {
Column() {
MyComponent()
Text('first column')
.fontSize(20)
}
Column() {
MyComponent()
Text('second column')
.fontSize(20)
}
}
}
private aboutToAppear() {
console.log('ParentComponent: Just created, about to become rendered first time.')
}
private aboutToDisappear() {
console.log('ParentComponent: About to be removed from the UI.')
}
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手