《OpenHarmony开源鸿蒙学习入门》-- 状态管理

最新推荐文章于 2024-03-18 17:00:42 发布

SuperHeroWu7

最新推荐文章于 2024-03-18 17:00:42 发布

阅读量1.5k

点赞数

分类专栏： OpenHarmony知识体系文章标签：开源学习 OpenHarmony

本文链接：https://blog.csdn.net/superherowupan/article/details/126943329

版权

OpenHarmony知识体系专栏收录该内容

12 篇文章 22 订阅

订阅专栏

《OpenHarmony开源鸿蒙学习入门》-- 状态管理

一、引子

最新单位开始断网办公，难受至极。很久没有更新博客了。平常碰到问题，总结梳理个文档，就可以顺手发个博客。现在要回家重写才行。

OpenHarmony最新发展势头很猛，得益于声明式UI编程的便利，看到最新的商业鸿蒙HarmonyOS3.0也开始上eTS开发了，对于开发应用来说，真的十分便利。

不同于命令式编程，拿到UI对象，再去更改UI的数据，让UI去刷新。声明式UI编程，让程序开发解放了手动控制UI刷新的过程。

二、状态管理的概念

基本概念很简单，我们只需要更改UI绑定的数值变量，当程序监听发现数值变化了，UI就会自动刷新。当然不可能任何一个数值变化都会刷新，这里有两个注意点，首先是要UI组件绑定使用的数值变量，并且要有@State修饰的变量。

三、@State，@Prop，@Link是什么？怎么用？

@State怎么用？如何刷新UI？
变量定义的写法为：

 @State count: number = 0

变量在UI布局中绑定的写法为：

// xxx.ets
@Entry
@Component
struct MyComponent {
    @State count: number = 0

    private toggleClick() {
        this.count += 1
    }

    build() {
        Column() {
            Button() {
                Text(`click times: ${this.count}`)
                    .fontSize(10)
            }
            .onClick(this.toggleClick.bind(this))
        }
    }
}

build() 函数是UI布局的核心，组件全都码在这里。

上面的demo例子可以看出，我新建了一个MyComponent 类。

@Entry 代表是一个界面
@Component 代表是一个组件
同时有两个注解修饰，代表是界面也可以是组件。通过调用方法不同，可以成为对应的形态。

任何组件都可以调用onlick触发点击回调。

当text文本组件的父组件，button按钮被点击时，count会+1.
上面我们说过了，使用@State修饰，那这个变量的数值状态发生变化，就会重写刷新UI。
所以我们看到的效果，就是点击button按钮，按钮的文本会从0变成1.

有几个注意点：
1.必须为所有@State变量分配初始值，要不然UI状态就错乱了。
2.@State修饰的组件，多个组件时，内部状态和数据是相互独立。
3. 调用自定义的组件，内部变量通过@State可以在调用初始化的时候，修改初始值。例如：

MyComponent({count: 99})

@Prop @Link 这对注解修饰的作用很简单

当我们使用嵌套View的时候，例如：

// MyComponent.ets
import targetComponent from './targetComponent.ets'

@Entry
@Component
class MyComponent {
    @State mFatherCount: number = 0

    private toggleClick() {
        this.mFatherCount+= 1
    }

    build() {
        Column() {
            Button() {
                Text(`click times: ${this.mFatherCount}`)
                    .fontSize(10)
            }
            .onClick(this.toggleClick.bind(this))
            targetComponent({ mPropCount: this.mFatherCount})
            // targetComponent({mLinkCount: $mFatherCount})
        }
    }
}

// targetComponent .ets
@Component
export default class targetComponent {
    @Prop mPropCount: number;
    // @Link mLinkCount: number;

    private toggleClick() {
        this.mPropCount+= 1
        // this.mLinkCount+= 1
    }

    build() {
        Column() {
            Button() {
                Text(`click times: ${this.mPropCount}`)
                // Text(`click times: ${this.mLinkCount}`)
                    .fontSize(10)
            }
            .onClick(this.toggleClick.bind(this))
        }
    }
}