2024年HarmonyOS鸿蒙最新HarmonyOS鸿蒙学习基础篇 - 自定义组件（一）_鸿蒙系统学习 csdn，HarmonyOS鸿蒙校招面试指南 lrh1993

本文链接：https://blog.csdn.net/2401_84862323/article/details/138576250

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

Column() {
// 创建MyComponent实例，并将创建MyComponent成员变量countDownFrom初始化为10，将成员变量color初始化为this.someColor
MyComponent({ countDownFrom: 10, color: this.someColor })
}
}
}

build()函数

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

@Entry装饰的自定义组件，其build()函数下的根节点唯一且必要，且必须为容器组件，其中ForEach禁止作为根节点。@Component装饰的自定义组件，其build()函数下的根节点唯一且必要，可以为非容器组件，其中ForEach禁止作为根节点。

@Entry
@Component
struct MyComponent {
build() {
// 根节点唯一且必要，必须为容器组件
Row() {
ChildComponent()
}
}
}

@Component
struct ChildComponent {
build() {
// 根节点唯一且必要，可为非容器组件
Image(‘test.jpg’)
}
}

不允许声明本地变量，反例如下。


build() { // 反例：不允许声明本地变量 let a: number = 1; }

不允许在UI描述里直接使用console.info，但允许在方法或者函数里使用，反例如下。


build() { // 反例：不允许console.info console.info(‘print debug log’); }

不允许创建本地的作用域，反例如下。


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())
}
}
}

不允许switch语法，如果需要使用条件判断，请使用if。反例如下。

build() {
Column() {
// 反例：不允许使用switch语法
switch (expression) {
case 1:
Text(‘…’)
break;
case 2:
Image(‘…’)
break;
default:
Text(‘…’)
break;
}
}
}

不允许使用表达式，反例如下。


build() { Column() { // 反例：不允许使用表达式 (this.aVar > 10) ? Text(‘…’) : Image(‘…’) } }

通用样式

自定义组件通过“.”链式调用的形式设置通用样式。

@Component
struct MyComponent2 {
build() {
Button(Hello World)
}
}

@Entry
@Component
struct MyComponent {
build() {
Row() {
MyComponent2()
.width(200)
.height(300)
.backgroundColor(Color.Red)
}
}
}

以上自定义组件预览效果如下，可以看到ArkUI给自定义组件设置样式时，相当于给MyComponent2套了一个不可见的容器组件，而这些样式是设置在容器组件上的，而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到，背景颜色红色并没有直接生效在Button上，而是生效在Button所处的开发者不可见的容器组件上。

生命周期

自定义组件和页面的关系：

自定义组件：@Component装饰的UI单元，可以组合多个系统组件实现UI的复用。
页面：即应用的UI页面。可以由一个或者多个自定义组件组成，@Entry装饰的自定义组件为页面的入口组件，即页面的根节点，一个页面有且仅能有一个@Entry。只有被@Entry装饰的组件才可以调用页面的生命周期。

页面生命周期，即被@Entry装饰的组件生命周期，提供以下生命周期接口：

onPageShow：页面每次显示时触发。
onPageHide：页面每次隐藏时触发一次。
onBackPress：当用户点击返回按钮时触发。

组件生命周期，即一般用@Component装饰的自定义组件的生命周期，提供以下生命周期接口：

aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToDisappear：在自定义组件即将析构销毁时执行。

生命周期流程如下图所示，下图展示的是被@Entry装饰的组件（首页）生命周期。

****需要注意的是，部分生命周期回调函数仅对@Entry修饰的自定义组件生效，它们分别是：onPageShow、onPageHide、onBackPress。****根据上面的流程图，我们从自定义组件的初始创建、重新渲染和删除来详细解释。

自定义组件的创建和渲染流程

自定义组件的创建：自定义组件的实例由ArkUI框架创建。
初始化自定义组件的成员变量：通过本地默认值或者构造方法传递参数来初始化自定义组件的成员变量，初始化顺序为成员变量的定义顺序。
如果开发者定义了aboutToAppear，则执行aboutToAppear方法。
在首次渲染的时候，执行build方法渲染系统组件，如果子组件为自定义组件，则创建自定义组件的实例。在执行build()函数的过程中，框架会观察每个状态变量的读取状态，将保存两个map：
状态变量 -> UI组件（包括ForEach和if）。
UI组件 -> 此组件的更新函数，即一个lambda方法，作为build()函数的子集，创建对应的UI组件并执行其属性方法，示意如下。

build() {
…
this.observeComponentCreation(() => {
Button.create();
})

this.observeComponentCreation(() => {
Text.create();
})
…
}

当应用在后台启动时，此时应用进程并没有销毁，所以仅需要执行onPageShow。

自定义组件重新渲染

当事件句柄被触发（比如设置了点击事件，即触发点击事件）改变了状态变量时，或者LocalStorage / AppStorage中的属性更改，并导致绑定的状态变量更改其值时：

框架观察到了变化，将启动重新渲染。
根据框架持有的两个map（自定义组件的创建和渲染流程中第4步），框架可以知道该状态变量管理了哪些UI组件，以及这些UI组件对应的更新函数。执行这些UI组件的更新函数，实现最小化更新。

自定义组件的删除

如果if组件的分支改变，或者ForEach循环渲染中数组的个数改变，组件将被删除：

在删除组件之前，将调用其aboutToDisappear生命周期函数，标记着该节点将要被销毁。ArkUI的节点删除机制是：后端节点直接从组件树上摘下，后端节点被销毁，对前端节点解引用，当前端节点已经没有引用时，将被JS虚拟机垃圾回收。
自定义组件和它的变量将被删除，如果其有同步的变量，比如@Link、@Prop、@StorageLink，将从同步源上取消注册。

不建议在生命周期aboutToDisappear内使用async await，如果在生命周期的aboutToDisappear使用异步操作（Promise或者回调方法），自定义组件将被保留在Promise的闭包中，直到回调方法被执行完，这个行为阻止了自定义组件的垃圾回收。

以下示例展示了生命周期的调用时机：

import router from ‘@ohos.router’;
@Entry
@Component
struct MyComponent {
@State showChild: boolean = true;

// 只有被@Entry装饰的组件才可以调用页面的生命周期

onPageShow() {
console.info(‘Index onPageShow’);
}

// 只有被@Entry装饰的组件才可以调用页面的生命周期
onPageHide() {
console.info(‘Index onPageHide’);
}

// 只有被@Entry装饰的组件才可以调用页面的生命周期
onBackPress() {
console.info(‘Index onBackPress’);
}

// 组件生命周期
aboutToAppear() {
console.info(‘MyComponent aboutToAppear’);
}

// 组件生命周期
aboutToDisappear() {
console.info(‘MyComponent aboutToDisappear’);
}

build() {
Column() {
// this.showChild为true，创建Child子组件，执行Child aboutToAppear
if (this.showChild) {
Child()
}

// this.showChild为false，删除Child子组件，执行Child aboutToDisappear
Button(‘create or delete Child’).onClick(() => {
this.showChild = false;
})

// push到Page2页面，执行onPageHide
Button(‘push to next page’)
.onClick(() => {
router.pushUrl({ url: ‘pages/Page2’ });
})
}

}
}

@Component
struct Child {
@State title: string = ‘Hello World’;
// 组件生命周期
aboutToDisappear() {
console.info(‘[lifeCycle] Child aboutToDisappear’)
}
// 组件生命周期
aboutToAppear() {
console.info(‘[lifeCycle] Child aboutToAppear’)
}

build() {
Text(this.title).fontSize(50).onClick(() => {
this.title = ‘Hello ArkUI’;
})