社区编辑申请
注册/登录
OpenHarmony—浅析ETS开发状态管理
系统 OpenHarmony
本文主要对于使用class定义复杂数据,以及跨组件传值、修改数据根据官方文档进行简单解析。

​想了解更多内容,请访问:​

​51CTO和华为官方合作共建的鸿蒙技术社区​

​https://ost.51cto.com​

前言

本文主要是对于鸿蒙开发文档 ETS 开发中的 UI状态管理部分进行解读和简单的实践,方便更快的切入开发工作,构建应用,对应文档链接:https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-ui-state-mgmt-concepts-0000001169868220。

鸿蒙状态管理简介

首先引用开发文档中的图片,图片中已经基本可以看出整个应用中的数据流动,非常全面。

华为鸿蒙开发文档对于应用中状态的管理提供了丰富且全面的接口(仅提供通俗理解,具体定义见文档):

  • @State:用于定义应用管理的状态,更像是React16.8之后的useState,方便代码根据业务划分逻辑,状态定义仅支持class、number、boolean、string 及其组成的数组,并不允许object和any。
  • @Props:单项数据流,父组件传递子组件,直接使用this.属性名向下传递数据,子组件使用此修饰器接收,推荐用于只渲染的数据用此定义。
  • @Link:双向数据流,解决了vue中**emit**函数的功能,父组件用emit∗∗函数的功能,父组件用向下传递数据,子组件使用此修饰器接收,推荐需要在子组件中修改父组件状态的情况(即为类似于在vue中需要使用$emit)下使用。
  • @Consume和**@Provide**: 其中provide是生产者,consume是消费者,写过react的开发者应该对此很熟悉,类似于react中的context上下文,这一对修饰器主要实现的是上层组件跨多层传值给下层组件,并实现双向绑定数据。
  • @Observed和**@ObjectLink**:其中@Observed用于修饰类,@ObjectLink用于在子组件中修饰已经被@Observed修饰的类对应的状态(具体用法见下文),这一对修饰器主要解决的问题是,如果定义了一个包含多个对象(类)的数组,其中对象的属性发生变化,能够被应用监测到并更新视图。
  • @Watch:在某一可被应用监测的状态发生修改的时候,执行某个额外的动作。
  • AppStorage:
  1. 应用程序中的单例对象,由UI框架在应用程序启动时创建,在应用程序退出时销毁,为应用程序范围内的可变状态属性提供中央存储,简单来说就类似于vuex/redux。
  2. 上述几个状态管理的修饰器,更多的是在同一个page中去使用,根据业务/页面逻辑划分组件,实现状态管理,父子组件传值,跨组件传值等。
  3. 而AppStorage是在多页面(page文件夹下有多个@Enter定义页面)应用程序中用于跨页面共享数据。
  4. 建议AppStorage的使用在有@Enter的组件中使用,其中的数据在组件树中从顶部注入,对子组件来说只是一个父组件传递过来的状态,保证子组件的职能单一,输入输出稳定,与外部数据解耦,保证复用性。

梦开始的地方(Typescript而非anyscript)

本文主要是对于复杂数据类型class的使用解读,对于number/boolean/string暂不做解读,请自行尝试。

一切都是从class开始的:@State定义中明确表示只能class、number、boolean、string 及其组成的数组,并不允许object和any,所以对于复杂数据类型的定义就需要用到class,如下图:

定义接口:

使用接口定义复杂数据(此处例子可以看出,用**new Month( )或者直接{ }**都是可以的)。

这里引用了官方文档https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ts-rending-control-syntax-foreach-0000001149978669中的例子,根据本文档中的例子可以看出,使用class可以定义复杂数据类型,并且其中Month8的属性在任何地方改变都可以被observe到,calendar中使用数组方法改变数组也能被observe到,并且触发重渲染

非常不推荐使用**any[ ]**的方式来定义复杂数据,这样定义的数据不会被应用observe到,数组发生改变,不会引发视图更新!

使用class定义的数据可以使用@Props和@Link向下传递数据,如下图,在second组件中修改calendar是生效的

  • 将class定义的数据传递给子组件

  • 子组件双向绑定改变状态!

跨组件传值(@Consume和@Provide)

类似于react中的context上下文实现跨组件传值,上层组件的状态可以直接传给最下层组件,非常好用。

我们已经有了@Props和@Link解决了简单的父子组件传值,文档同样提供了跨组件传值的方法,@Provide可以直接替换掉@State定义状态,@consume可以在需要接收的子组件中拿到传递下来的状态。

定义状态:

使用并渲染,并尝试改变,(其实传给下一层还是下下层使用和效果上没啥区别)。

当然传给第三层也可以看一下效果:

渲染结果:

在子组件中修改数组。

在子组件中修改对象中的属性。

在子组件中修改数组中的对象的属性(此方法失败,状态改变了,但是并没有渲染,这是有问题的),正确方法见下文。

神奇的@Observed和@ObjectLink

@Observed是用来修饰类的,能够帮忙监测多层数据中的数据变化,官方文档中已经给出了具体的使用方法,而且非常灵活,这一对修饰器主要解决的正是上述遗留问题,如何修改数组中的对象中的属性,并能够自动触发重渲染。

使用@Observed:

使用@ObjectLink,这里主要是验证用provider/link传递到下层的数据能否被修改。

看效果:

从上述案例可以看出:使用@Observed和@ObjectLink可以实现对比较复杂的数据最内部数据的修改,使用起来相对灵活。

总结

本文主要对于使用class定义复杂数据,以及跨组件传值、修改数据根据官方文档进行简单解析,对于状态管理还包括AppStorage、持久化数据以及环境变量的验证,将会在下一篇文章中做出详解,希望本篇文章能够在一定程度上帮助初学ets的开发者快速掌握其开发方式。

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-05-24 15:06:57

AbilityeTS FA鸿蒙

2022-04-06 11:27:05

harmonyeTS 开发NAPI开发

2022-05-11 15:08:52

驱动开发系统移植

2022-04-02 20:45:04

Hi3516开发板操作系统鸿蒙

2022-03-21 15:19:27

鸿蒙UI组件ets自定义

2022-01-07 09:56:16

2022-04-18 10:37:01

鸿蒙操作系统开发工具

2022-04-15 14:31:02

鸿蒙操作系统

2022-06-16 17:02:49

微软智能云混合云Azure

2022-05-27 10:00:06

C++游戏引擎

2022-06-07 10:33:29

Camera组件鸿蒙

2022-04-20 20:28:40

HDF 驱动框架鸿蒙操作系统

2022-02-09 19:45:41

2022-06-13 14:18:39

电源管理子系统耗电量服务

2022-06-06 10:55:51

本地服务鸿蒙

2022-05-24 15:55:37

避障小车华为

2022-06-09 14:40:14

系统移植鸿蒙

2022-03-10 14:45:23

HarmonyAPI操作系统

2022-04-07 15:28:16

HarmonyOS鸿蒙操作系统

2022-05-11 14:54:02

输入法框架鸿蒙

同话题下的热门内容

微软 Windows 11 Build 22000.778 (KB5014668) 发布:新增搜索亮点,带来大量修复内容用这些开源工具在 Linux 上编辑 PDF 文件面对验证码 iOS 16给出了最完美的解决方案谷歌 Chrome 浏览器 103 正式版发布:页面加载速度更快,支持本地字体访问、Web 共享 AVIF 文件Docker Compose:搭建开发环境的好方式为什么用C语言编写操作系统?在 Linux 上玩电子游戏的三种方式为什么命令行在 Linux 生态系统中如此重要

编辑推荐

你应该知道的八款国产操作系统为什么你可能想要略过Ubuntu 17.04?HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南让后端开发情何以堪?前端程序猿薪资大曝光谷歌“断供”华为!中国真写不出操作系统?
我收藏的内容
点赞
收藏

51CTO技术栈公众号