【鸿蒙南向开发】OpenHarmony——浅析ETS开发状态管理

「已注销」

于 2024-08-07 15:45:00 发布

阅读量702

点赞数 23

分类专栏：安卓前端鸿蒙文章标签： harmonyos 华为 ui android 鸿蒙

本文链接：https://blog.csdn.net/HarmonyOS_666/article/details/140993840

版权

前端同时被 3 个专栏收录

199 篇文章 0 订阅

订阅专栏

鸿蒙

199 篇文章 8 订阅

订阅专栏

安卓

198 篇文章 0 订阅

订阅专栏

前言

本文主要是对于鸿蒙开发文档 ETS 开发中的 UI状态管理部分进行解读和简单的实践，方便更快的切入开发工作，构建应用。

鸿蒙状态管理简介

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

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

@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的开发者快速掌握其开发方式。

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）文档包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。