第五节HarmonyOS ArkTS声明式开发范式

ArkTS声明式开发范式:

规范中各个内容说明如下:

  1. 装饰器

1、基本UI装饰器@Entry、@Component

@Entry

装饰struct,页面的入口。

@Component

装饰struct,表示该struct具有基于组件的能力。

2、数据装饰器@State、@Prop、@Link

@State

当数据被修改时,所在组件的build()方法会被重新调用,进而重新绘制该页面UI。此装饰器的作用范围仅限于其所在的UI内部。

@Prop

该组件继承@State的基本功能,同时,又有两个新的特点:

  1. 只能被其父控件的@State变量初始化(假设为name)
  2. 与其父组件建立单向联系,监听父组件中的变量name,当name的值发生变化时,该@Prop也会同步变化,进而重绘制其所在控件的UI。

@Link

与@Prop不同的是,@Link会与其父控件中对应的@State变化建立双向联系,即当子组件中的@Link对象发生变化时,其父组件中对应的@State变量也会随之变化,这个时候父UI与子UI都会重绘。

数据装饰器@State、@Prop、@Link三者的相同点与不同点:

相同点:

  1. 都会引起UI的重绘
  2. 内部私有

不同点:

不同点

@State

@Prop

@Link

装饰内容

基本数据类型、类、数组

基本数据类型

基本数据类型、类、数组

关联

不与其他控件关联

父@State -> 子@Prop单向关联

父@State <-> 子@Link单向关联

初始化时机

声明时

创建组件时由参数传入

创建组件时由参数传入

  1. 生产者-消费者模式的装饰器@Provide、@Consume

这一对是形成生产者-消费者模式的装饰器,且双向绑定。@Provide必须设置初始值,@Consume不可设置默认初始值

触发变化的时机:

  1. 基础类型(boolean、string、number)变量的改变
  2. @Observed class类型变量以及其属性的修改
  3. 添加、删除、跟新数组中的元素

struct  CompA {
@Provide("reviewVote") reviewVotes: number = 0;
}

struct  CompB {
@Consume("reviewVote") reviewVotes: number
}

框架行为:

  1. 初始渲染:
    1. @Provide装饰的变量会以map的形式,传递给当前@Provide所属组件的所有子组件;
    2. 子组件中如果使用@Consume变量,则会在map中查找是否有该变量名/alias(别名)对应的@Provide的变量,如果查找不到,框架会抛出JS ERROR;
    3. 在初始化@Consume变量时,和@State/@Link的流程类似,@Consume变量会保存在map中查找到的@Provide变量,并把自己注册给@Provide。
  2. 当@Provide装饰的数据变化时:
    1. 通过初始渲染的步骤可知,子组件@Consume已把自己注册给父组件。父组件@Provide变量变更后,会遍历更新所有依赖它的系统组件(elementid)和状态变量(@Consume);
    2. 通知@Consume更新后,子组件所有依赖@Consume的系统组件(elementId)都会被通知更新。以此实现@Provide对@Consume状态数据同步。
  3. 当@Consume装饰的数据变化时:
    1. 通过初始渲染的步骤可知,子组件@Consume持有@Provide的实例。在@Consume更新后调用@Provide的更新方法,将更新的数值同步回@Provide,以此实现@Consume向@Provide的同步更新。
  1. 观察者模式的装饰器@Watch

使用观察者模式的装饰器,但该装饰器不是触发变量变化,而是绑定一个函数,当@Watch变量变化时,调用该函数。

struct  ComA {
// 绑定onBasketUpdate方法,当变量更新时调用
@State @Watch('onBasketUpdate') shopBasket: Array = [7, 12, 47, 3]

onBasketUpdate(propName: string): void {
this.updateTotal()
}
}

  1. 自定义组件

可复用的UI单元,可组合其他组件,如上述被@Component装饰的“struct Hello”,就是一个自定义组件。

  1. UI描述

声明式的方式来描述UI的结构,如上述build()方法内部的代码块。

  1. 内置组件

框架中默认内置对的基础和布局组件,可以直接被开发者调用,比如示例中对的Column、Text、Divider、Button等。

  1. 事件方法

用于添加组件对事件的相应逻辑,统一通过事件方法进行设置,如跟随在Button后面的onClick()。

  1. 属性方法

用于组件属性的配置,统一通过属性方法进行设置,如fontSize()、width()、height()、color()等,可通过链式调用的方式设置多项属性。

        总之,从UI框架的需求角度,ArkTS在TS的类型系统的基础上,做了进一步的扩展:定义了各种装饰器、自定义组件和UI描述机制,再配合UI开发框架中的UI内置组件、事件方法、属性方法等共同构成了应用开发的主体。在应用开发中,除了UI的结构化描述之外,还有一个重要的方面:状态管理。如上述示例中,用 @State 装饰过的变量 myText ,包含了一个基础的状态管理机制,即 myText 的值的变化会自动触发相应的 UI 变更 (Text组件)。

        ArkUI 中进一步提供了多维度的状态管理机制。和 UI 相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间,爷孙组件之间,也可以是全局范围内的传递,还可以是跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和 UI 的联动。

        总体而言,ArkUI开发框架通过扩展成熟语言、结合语法糖或者语言原生的元编程能力、以及UI组件、状态管理等方面设计了统一的UI开发范式,结合原生语言能力共同完成应用开发。这些构成了当前ArkTS基于TS的主要扩展。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/227570.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DBS note4:Buffer Management

目录 1、介绍 2、缓冲池 3、处理页面请求 4、LRU替换和时钟策略 1&#xff09;顺序扫描性能 - LRU 5、最近最常使用替换策略&#xff08;MRU Replacement&#xff09; 1&#xff09;Sequential Scanning Performance - MRU 6、练习题 1&#xff09;判断真假 2&#xf…

Node.js 事件循环:定时任务、延迟任务和 I/O 事件的艺术

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

【Python】获取调用者信息

水文一篇(毕竟已经有很多相关内容)。 暂时找到两个方式获取调用者信息&#xff0c;一个是traceback&#xff0c;另一个是inspect。 其中&#xff0c; inspect能获取更为详尽的上下文信息(?)&#xff0c;在某些特殊场合甚至能以此省略函数调用时传入的locals()和globals()。 代…

位运算总结

文章目录 &#x1f348;1. 基础位运算&#x1f34c;2. 给一个数n&#xff0c;确定它的二进制表示中的第x位是0还是1&#x1f34f;3. 将一个数n的二进制表示的第x位修改成1&#x1f353;4. 将一个数的n的二进制表示的第x位修改成0&#x1f954;5. 位图的思想&#x1fad2;6. 提前…

python服装电商系统vue购物商城django-pycharm毕业设计项目推荐

系统面向的使用群体为商家和消费者&#xff0c;商家和消费者所承担的功能各不相同&#xff0c;所对象的权限也各不相同。对于消费者和商家设计的功能如下&#xff1a; 对于消费者设计了五大功能模块&#xff1a; &#xff08;1&#xff09; 商品信息&#xff1a;用户可在商品…

MySQL优化技巧

在使用一些常规的 SQL 时&#xff0c;如果我们通过一些方法和技巧来优化这些 SQL 的实现&#xff0c;在性能上就会比使用常规通用的实现方式更 优化分页查询 通常我们是使用 <LIMIT M,N> 合适的 order by 来实现分页查询&#xff0c;这种实现方式在没有任何索引条件支…

Java中的多态究竟是什么?

目录 一.概念二.使用条件三.重写1.概念2.使用条件3.与重载对比4.举例5.为什么需要重写1.重写规则 2.静态绑定--重载3.动态绑定--重写 四.向上转型第一种传参方式&#xff1a;直接赋值第二种传参方式&#xff1a;通过传参优缺点 五.向下转型举例缺点 六.多态的优缺点优点缺点 一…

解锁 ElasticJob 云原生实践的难题

发生了什么 最近在逛 ElasticJob 官方社区时发现很多小伙伴都在头疼这个 ElasticJob 上云的问题&#xff0c;ElasticJob 本就号称分布式弹性任务调度框架&#xff0c;怎么在云原生环境就有了问题了呢&#xff0c;这就要从 Kubenertes 和 ElasticJob 的一些状态化说起。 有意思的…

windows10系统更新失败无法进入系统

用户反馈早上电脑重启&#xff0c;系统在更新卡好久好进去是否更新windows11&#xff0c;选否&#xff0c;重新就反复在更新中无法进入系统。我在测试的过程也是多次更新卡好久无法进入系统&#xff0c;而且出现下面提示 windows10系统更新失败无法进入系统&#xff0c;蓝屏提…

sqli-labs(4)

17. 观察页面发现是一个用来更改用户密码的页面&#xff0c;页面中出现了用户Dhakkan user输入Dhakkan passs输入1发现成功找注入点 先在user尝试&#xff0c;发现不管输入什么都失败在pass中尝试注入 在pass中输入1‘ 报错注入 1 and extractvalue(1,concat(0x5c,database(…

【Electron】上下键切换消息

需求&#xff1a; 如图&#xff0c;需要监听上下键切换消息 Electron 注册 全局快捷键【globalShortcut】监听 在focus注册 在blur 注销 如苹果系统在使用某个软件(focus)时 右上角会有应用标题 Electron 代码&#xff1a; win.on(focus, ()>{globalShortcut.register(U…

OPENWRT解决配置pppoe后无法光猫路由管理界面

一、新建一个wan口 二、设置流量转发 设置完成后保存应用即可