HarmonyOS ArkTS의 기본 구문, 상태 관리 및 렌더링 제어에 대한 시나리오

ArkTS의 기본 문법

@Entry
@Component
struct Index {
 @State message: string = 'Hello World'
 @State myText: string = ' World'
 build() {
 Row() {
 Column() {
 Text('item 1')
 Divider()
 Text('item 2')
 Text('test')
 .fontSize(12)
 Button(`Hello ${this.myText}`)
 .onClick(() => {
 this.myText = ' ArkUI';
 })
 
 }
 .width('100%')
 }
 .height('100%')
 }
}

사용자 정의 구성 요소의 기본 사용법

@Entry
@Component
struct Index {
 @State message: string = 'Hello World'
 @State myText: string = ' World'
 build() {
 Row() {
 Column() {
 Text('item 1')
 Divider()
 Text('item 2')
 Text('test')
 .fontSize(12)
 Button(`Hello ${this.myText}`)
 .onClick(() => {
 this.myText = ' ArkUI';
 })
 HelloComponent({hellomessage :" });
 }
 .width('100%')
 }
 .height('100%')
 }
}
@Component
struct HelloComponent {
 @State hellomessage:string = 'Hello World';
 build() {
 Row() {
 Text(this.hellomessage)
 .onClick(() => {
 this.hellomessage = 'hello arkui';
 })
 }
 }
}

• 구조체: 사용자 정의 컴포넌트는 구조체, 구조체 + 사용자 정의 컴포넌트 이름 + {...}를 기반으로 구현됩니다. 구조체 + 사용자 정의 컴포넌트 이름 + {...}의 조합은 사용자 정의 컴포넌트를 구성하며, 상속은 허용되지 않습니다. 구조체 인스턴스화의 경우 new를 생략할 수 있습니다.

컴포넌트 데코레이터는 구조체 키워드로 선언된 데이터 구조체만 데코레이션할 수 있습니다. 구조체는 @컴포넌트에 의해 데코레이션된 후 컴포넌트화될 수 있으며, UI를 설명하는 빌드 메서드를 구현해야 하며, 구조체는 하나의 @컴포넌트에 의해서만 데코레이션될 수 있습니다.

빌드() 함수: 빌드() 함수는 사용자 정의 컴포넌트의 선언적 UI 설명을 정의하는 데 사용되며, 사용자 정의 컴포넌트는 빌드() 함수를 정의해야 합니다.

엔트리: @Entry로 꾸민 사용자 지정 컴포넌트는 UI 페이지의 진입점 역할을 합니다. 단일 UI 페이지에서 @Entry로 장식할 수 있는 사용자 지정 컴포넌트는 최대 하나까지입니다. 엔트리는 선택적 매개변수를 받을 수 있습니다.