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

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

一、引子

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

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

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

二、状态管理的概念

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

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

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

 @State count: number = 0
1

变量在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))
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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})
1

@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))
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

我们创建一个targetComponent 子View组件，在父View组件用调用。

这时候将父View的mFatherCount传递给子View，就用两种方式，单行绑定 @Prop，双向绑定@Link。

当父View的mFatherCount数值发生变化，@Prop修饰的变量，只能被动接收变化。而@Link修饰的变量，在子View内发生变化可以将变化传递给父View。

用UI呈现的效果来说，前者界面刷新是通过mFatherCount变化触发，让mPropCount也变化。后者界面刷新是通过mLinkCount触发。

有几个注意点：
1.使用@Link时，赋值是通过$修饰传递数值的。
2.使用@Link，@Prop修饰的变量，从外面赋值的时候，必须是@State修饰。@LInk从外面赋值也是可以同类型的@Link。
3.使用@Prop仅支持number、string、boolean简单类型。