《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

变量在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))
        }
    }
}

我们创建一个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简单类型。

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

SuperHeroWu7

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值