鸿蒙开发的探索 (二)

一.ArkTS 基础

1. 简介

提供了声明式UI的规范,是ts的拓展,新增状态管理的能力

2.UI描述规范

  • 装饰器,@component,@state装饰类,结构,方法和变量,赋予特殊意义,就好比对于一些方法逻辑打上标记,在执行一些特殊操作的时候有一些特殊的附带的逻辑处理行为
  • ui描述,声明式的方式描述ui
  • 内置组件,系统提供了基础组件和容器组件
  • 属性方法,设置组件的属性
  • 事件方法,设置组件对事件的响应逻辑

3. 常用装饰器

  • @component 自定义组件,组件化的方法,
  • @entry 装饰器作为页面的默认入口组件,加载页面,首先创建@entry的自定义组件,一个页面有且只能有一个入口entry
  • @buider 装饰器是组件内部拆分组件方法,让页面结构清晰

4. 自定义组件生命周期回调函数

  • aboutToAppear() //项目初始化的时候调用类似于vue中created()
  • aboutToDisappear() //自定义组件销毁之前,释放内存资源,避免内存泄露类似于vue中的beforeDestroy()
  • onPageShow() //刚打开应用进入页面时类似于vue中的mounted()
  • onPageHide() //home健返回,页面进入后台时(移动端api)
  • onBackPress() //系统操作的返回,可设置返回状态(移动端api)

5.渲染逻辑

  • 条件渲染 if/else
  • 循环渲染 ForEach
scss 复制代码
    List(){
     ForEach(List,(item)=>{
         ListItem(){...}
     },(item)=>item.id)
    }

6. 状态管理

  • @state 装饰器的变量是组件内部的状态数据,有数据热更新的能力
  • @Link 装饰器的变量和副组件的@state变量建立双向数据绑定,任何一方数据变更都会触发另一方数据同步渲染,副组件中必须使用引用初始化$代替this
  • @Prop装饰的变量可以和父组件建立单向的同步关系。@Prop装饰的变量是可变的,但是变化不会同步回其父组件。

二. 声明式UI

1. 声明式描述

通过标签声明页面布局和内容,行列标签代表页面的行列布局规则,<row /> <column />以及样式属性的衔接flex布局的调整,构成了页面的布局

2. 状态驱动数据视图

应用界面是动态的,根据状态的不同展示不同的ui内容,如果数据结果变化了,list数组变化了,那么页面也会同步更新展示最新的数据结果,比如list数据条数的变化,分页查询或者列表页的增删改查之类的操作

3. 开发实践总结

  • 自定义组件的声明,相同结构相同内容,可组合的ui单元
  • 配置属性,支持链式调用的方式配置style样式
  • 布局,容器组件,描述多个组件间布局关系的组件,row/column
  • 改变组件的状态,通过变量控制组件的状态展示,通过点击事件改编变量的值,通过条件语句渲染不同状态
  • 渲染数据,通过循环语句渲染相同数据UI,快速生成多个数据展示
相关推荐
程序猿追1 分钟前
【鸿蒙PC桌面端实战】从零构建 ArkTS 高性能图像展示器:DevEco Studio 调试与 HDC 命令行验证全流程
华为·harmonyos
@大迁世界8 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路17 分钟前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug20 分钟前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu1213822 分钟前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中44 分钟前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架
前端世界1 小时前
设备找不到、Ability 启不动?一次讲清 DevEco Studio 调试鸿蒙分布式应用
华为·harmonyos
前端 贾公子1 小时前
从入门到实践:前端 Monorepo 工程化实战(4)
前端