ArkTS基础知识

ArkTS简介

ArkTS是HarmonyOS优选主力开发语言，它基于TypeScript（TS）扩展，继承了TS的所有特性，是TS的超集。ArkTS使用声明式的方式描述用户界面（UI），布局更直观易懂。

ArkTS具有多维度的状态管理机制，可以使用@State、@Prop等装饰器以及LocalStorage等管理应用的状态。它支持在组件内使用与UI相关联的数据，实现局部状态管理；支持在不同组件层级间传递数据，包括父子组件和爷孙组件之间的传递；全局状态管理允许在应用的整个范围内传递数据，也可以跨设备传递。ArkTS还提供了灵活的渲染控制功能，使开发者能够根据应用的状态动态渲染UI内容。

ArkTS语言的工具链比较完善，包括代码编辑器、编译器、调试器、测试工具等，这使得它更加易于使用和调试。

UI描述规范

ArkTS的UI描述规范主要体现在以下几个方面：

1. 布局：布局是UI的必要元素，它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式，包括线性布局、层叠布局、弹性布局、相对布局、栅格布局等，以及相对复杂的列表、宫格、轮播。
2. 组件：组件是UI的必要元素，形成了在界面中的样子。组件由框架直接提供的是系统组件，由开发者定义的是自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面不同单元的独立创建、开发和复用，具有更强的工程性。
3. 页面路由和组件导航：应用可能包含多个页面，可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。
4. 动画：动画是UI的重要元素之一。
5. 交互事件：交互事件是UI和用户交互的必要元素。

UI示例

这个示例展示了一个简单的ArkTS组件，其中包含一个标题和一个按钮。当按钮被点击时，控制台会输出一条消息。这个组件使用JSX语法来定义界面，其中包含一个<div>元素和嵌套的<h1>和<button>元素。在<button>元素上，我们使用@click来指定当按钮被点击时要执行的回调函数。

除了这个简单的示例，ArkTS还提供了许多其他的UI组件和工具，例如布局组件、表单组件、数据组件、动画组件等。开发者可以根据需要选择和使用这些组件来构建自己的应用界面。同时，ArkTS还支持自定义组件和封装的物理模型，使得开发者可以更加灵活地构建自己的UI组件和实现自定义的动画效果。

常用装饰器@Component与@Entry

ArkTS中的@Component和@Entry是两个常用的装饰器，它们用于自定义组件和定义页面的入口。

@Component装饰器用于装饰struct声明的数据结构，这个过程称为自定义组件。被@Component装饰的struct称为UI组件，每个UI组件需要定义为@Component struct对象，其内部必须包含一个且只能包含一个build()函数，用于绘制UI。在struct之内、build()函数之外的地方用于存放数据。被@Entry装饰的@Component，组件被装饰后作为页面的默认入口，页面加载时渲染显示，一个页面有且仅有一个@Entry入口。

@Component举例

import { Component, build } from '@ark-framework/web-components';

@Component({ 

tag: 'hello-world', 

}) 

export default class HelloWorld extends Component {  

 render() {

return build`  

<div>

 <h1>Hello, World!</h1>  

</div>

  `; 

  }   } 

这个示例中，我们使用@Component装饰器来声明一个名为HelloWorld的自定义组件。组件的tag属性为'hello-world'，这意味着我们可以使用这个标签来在页面中引入这个组件。在组件的render方法中，我们使用build函数来返回UI描述的字符串。在这个描述中，我们创建了一个包含标题的div元素。

@Entry举例

import { Entry, render } from '@ark-framework/web-components';

import HelloWorld from './HelloWorld';  

@Entry({  

  title: 'My Entry',  

})  

export default class MyEntry extends Entry {  

render() {  

    return build`    

      <HelloWorld />  

   `;  

  }    }  

这个示例中，我们使用@Entry装饰器来声明一个名为MyEntry的页面入口。入口的title属性为'My Entry'，这意味着这个页面将以这个标题显示在应用的主界面上。在入口的render方法中，我们使用build函数来引入之前定义的HelloWorld组件。这样，当这个页面被加载时，HelloWorld组件将被渲染显示。

渲染控制

ArkTS中的渲染控制主要通过条件渲染和循环渲染实现。

条件渲染可以根据应用的不同状态，渲染对应状态下的部分内容。例如，如果一个组件需要根据某个条件来决定是否显示，那么可以使用条件渲染来实现。

循环渲染可以从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。例如，如果有一个列表数据需要显示在界面上，那么可以使用循环渲染来实现。

在使用渲染控制时，需要注意一些限制和约束，例如不能在组件内部使用循环渲染，只能使用条件渲染等。同时，ArkTS也扩展了双向绑定等能力，使得开发者能够更灵活地控制组件的状态和行为。

未来，ArkTS会结合应用开发/运行的需求持续演进，逐步提供并行和并发能力增强、类型系统增强、分布式开发范式等更多特性。

渲染示例

条例渲染

循环渲染

状态管理

ArkTS中的状态管理主要通过装饰器@State和@Prop以及状态管理库LocalStorage和AppStorage实现。

@State装饰器用于定义组件的状态变量，而@Prop装饰器用于定义父组件传递给子组件的属性。使用@State和@Prop装饰器可以方便地对组件的状态进行管理和传递。

LocalStorage和AppStorage是ArkTS提供的一些状态管理库，它们可以帮助开发者在不同的页面和组件之间共享数据。LocalStorage用于存储本地数据，而AppStorage用于存储应用级别的数据。通过使用这些状态管理库，开发者可以轻松地实现全局状态管理和跨页面数据共享。

除此之外，ArkTS还提供了其他的状态管理工具和扩展，例如Redux和MobX等，这些工具可以帮助开发者更好地管理和维护应用的状态。

总之，ArkTS中的状态管理提供了多种工具和方法，让开发者能够更加方便地管理和维护应用的状态，提高开发效率和代码的可维护性。

举例

以下是一个ArkTS中状态管理的示例：

假设我们有一个名为CountModifier的自定义组件，它包含一个名为count的状态变量。我们希望当用户点击一个按钮时，count的值能够自增1。同时，我们希望在父组件中能够监听count值的变化，并在其内部更新一个名为total的状态变量。

首先，在CountModifier组件中，我们可以使用@State装饰器来定义count状态变量：

import { State, build } from '@ark-framework/web-components';

@State('count')  

export default class CountModifier extends Component {  

  render() { 

    return build`  

    <div>

     <p>Count: ${this.state.count}</p>  

        <button @click=${this.increment}>Increment</button> 

      </div> 

    `;

  }

  increment() {  

    this.state.count += 1;  

} }

在这个组件中，我们使用@State装饰器定义了一个名为count的状态变量。在render方法中，我们通过${this.state.count}来引用count变量的值。当用户点击Increment按钮时，increment方法将被调用，count的值将自增1。

接下来，在父组件中，我们可以使用@Prop装饰器来传递count变量的值给CountModifier组件。同时，我们也可以使用@Watch装饰器来监听count值的变化，并在其内部更新total状态变量：

import { Component, Watch, State, build } from '@ark-framework/web-components';

import CountModifier from './CountModifier'; 

@Component({  

  tag: 'my-component',  

}) 

export default class MyComponent extends Component { 

  @State('total')  

  totalState;  

 @Watch('count')  

 onCountUpdated(newValue, oldValue) {  

    this.totalState = newValue;  

  }  

  render() {  

   return build`  

      <CountModifier count="${this.props.count}" />    

      <p>Total: ${this.totalState}</p>     

    `;  

}  }