HarmonyOS 组件 - 技术栈

在HarmonyOS中构建页面的最小单元是组件，除了官方提供的组件外我们也可以自定义组件。每一个组件都包含视图、状态、事件、生命周期这几个部分。

声明与使用

在HarmonyOS中声明组件使用的是@Component装饰器。然后使用struct关键字构建一个结构，并定义build方法。build方法中主要是进行页面视图的构建。

arkTs 复制代码

@Component
struct CustomCom{
	build(){
	}
}

声明组件后可以在任何其他页面或组件中使用。先通过import导入组件，接着在build函数中执行一下组件函数。

arkTs 复制代码

import CustomCom from '../components/CustomCom'

@Entry
@Component
struct Index{
	build(){
		CustomCom();
	}
}

上面的组件我们简单地对视图做了封装，接下来，我们开始定义组件的状态。

组件状态

组件中定义状态分为使用装饰器和不使用装饰器两种类型。不使用装饰器定义的状态就是一个普通数据，它的变化不会对视图造成影响。使用装饰器的状态会有特殊效果。

@State

使用@State 修饰符。通过@State 定义的变量会被监听，当状态变化的时候会重新渲染视图。

arkTs 复制代码

@Entry
@Component
struct Index{
	@State name:string = '';
	build(){
		Column(){
			Text(this.name)
			Button('change  name').onClick(()=>{this.name = 'hello'})
		}
	}
}

上面，我们使用@State装饰器声明一个name属性，然后在点击按钮的时候更改这个name属性。当name属性被更改时，视图也会被重新渲染。

@Prop

使用@Prop装饰器声明的状态需要由外部组件传递数据。我们可以利用这种特性增加组件的灵活性。

arkTs 复制代码

@Component
struct Child{
	@Prop message:string = ''
	build(){
		Column(){
			Text(this.message)
		}
	}
}

@Entry
@Component
struct Index{
@State message:string = 'hello'
	build(){
		Child({message:this.message})
	}
}

上面我们使用@Prop装饰器在Chil组件内部声明了一个message状态，在父组件中使用@State装饰器声明了一个message属性，并传递给children。那么当父组件中的message变化时，Child组件的值也会发生变化，视图也会重新渲染。

@State+@Prop的通信方式为父到子的单向通信，父组件可以向子组件传递数据，且当父组件的状态更新后子组件的状态也会更新。子组件内不能更改从父组件传递的数据。

值的注意的是，当传入一个多层次的引用类型的数据时，@State只会监听到第一层数据的变化，即，当第一层数据变化时视图会被重新渲染。对于更深层次的数据变化视图不会重新渲染。

@Link

使用@Link装饰器可以声明一个双向传递的状态。当父组件中的数据发生变化时，子组件会监听到这种变化，当子组件修改状态时，父组件也会更新状态。

arkTs 复制代码

@Component
struct Child{
	@Link message:string;
	build(){
		Column(){
			Text(this.message)
			Button('change).onClick(()=>{this.message = 'son'})
		}
	}
}
@Component
struct Parent{
	@State message:string = 'hello'
	build(){
		Column(){
			Text(this.message)
			Child({message:this.message})
			Button('change).onClick(()=>{this.message = 'message'})
		}
	}
}

上面我们使用@State在Parent组件中声明一个message，并传递给Child组件。在Chil组件中通过@Link装饰器接收数据。那么当我们在Parent组件中点击按钮更改message的值时，Child组件的数据会发生变化，当我们在Child组件中点击按钮更改message的值时父组件的message会同步更改。

@Link只会监听第一层的数据变化，不会对深层次的数据变化作出响应。

@Oberved和@ObjectLink

有时我们需要对深层次的数据变化也能作出相应，这个时候就需要使用@Observed和@ObjectLink装饰器进行声明数据。

arkTs 复制代码

@Component
struct Child{
	@ObjectLink person:Person[];
	build(){
		Column(){
			ForEach(this.person,(item:Person)=>{
				Row(){
					Text(item.name)
					Text(item.age+'')
				}
			})
		}
	}
}
interface Address{
	country:string
}
@Observed class Person{
		name:string
		age:number
		address:Address
		constructor(name:string,age:number,address?:Address){
			this.name = name;
			this.age = age;
			this.address = address;
		}
	}
@Component
struct Parent{
	address:Address = {
		country:'ch'
	}
	@State personList:Person[] = [
		new Person('hello',29,this.address)	,
		new Person('hello',29)	,
		new Person('hello',29)	
	]
	build(){
		Column(){
			Child({person:this.personList})
			Btton('change').onClick(()=>{
				this.personList[0].address.country = 'zh'
			})
		}
	}
}

上面使用@Observed和@ObjectLink进行数据传递，当我们在Parent组件中点击按钮更改personList中的数据时，Child也会进行同步更改。

事件

HarmonyOS组件中没有分发事件的方法，要想在组件发生某些事件的时候执行外部逻辑，需要向组件传递函数。

arkTs 复制代码

@Component
struct Child{
@Prop onClick:()=>void;
	build(){
		Column(){
			Button('test').onClick(()=>{this.onClick()})
		}
	}
}

@Component
struct Parent{
	handleClick(){
		console.log('Child click')
	}
	build(){
		Child({onClick:this.handleClick})
	}
}

生命周期

aboutAppear

在组件加载时触发

onPageShow

在页面显示时触发，在初次渲染以及应用从后台切换到后台时都会触发。

onDidBuild

在组件渲染后触发

onPageHide

在页面隐藏时触发，在应用切换到后台以及切换到其他页面时都会触发。

onBackPress

在页面返回时触发，在页面返回到上一个页面时触发。

该函数可以返回一个布尔值，如果为true，表示页面自己处理返回逻辑。

aboutToDisappear

组件销毁时触发。

值的注意的是，onPageShow、onPageHide只在使用@Entry装饰器修饰的组件中才能触发。