OpenHarmony——ETS 状态变量装饰器 原创

作者：尹成亚

前言

   在ETS的学习和实践中，将所踩过的坑以及相关注意点的记录分享，官方文档上也大概有讲述了，社区可能分享过相关的文档，本文是总结了一下，对于文档上的一些描述有了一定实践修改，对于不妥之处，敬请各位大神指教。

1、状态变量装饰器的类别

​ @State @Prop @Link（注意点：必须大写）

2、状态变量装饰器的作用

​ 管理组件内部的状态数据，有指向性的更新目标视图。

• @State： 组件拥有的状态属性，当**@State**装饰的变量更改时，组件会重新渲染更新视图。
• @Prop： 依赖父组件的状态属性，但是子组件所做的更改不会引起到父组件的视图刷新，属于单向传递。
• @Link： 和@Prop相似，但是不同之处在于，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。

3、三种状态变量装饰器的异同点

​ 这三种装饰器都有各自的特点，主要总结如下：

​ 相同点：只能在组件内使用。

​ 异同点：1）@Prop只支持基本类型number,string,boolean( 注意点：必须小写 ）， @State和**@Link除了支持上述的类型外，还支持上述类型的数组，但是不支持复杂类型object和any( 注意点：官网介绍的不支持，但是实际用是可以支持的( 除了@State**的number类型 )，如下图1)；

​

::: hljs-center

图1

:::

​ 2）@State组件内不同实例的状态数据是独立的（ 如下图2 ）；

​

::: hljs-center
图2

:::
​ 3）初始化数据方式不同，@State可以在自己的组件内初始化，也可以为自定义的组件提供传值的方式进行初始化；@Prop和**@Link初始化则是父组件里面@State**定义的变量（ 注意点：不能在组件内部初始化，只能定义类型（如下图3）；

​

::: hljs-center
图3
:::

​ 4）@Prop是单向，内部修改不会更新父组件如下图3）；@Link则是双向，会通知父组件**@State**变量（如下图4）。

​
::: hljs-center
​ 图4
:::

​ 5）如果是多层嵌套（也就是子组件里面再嵌套孙子组件），那里面所有的组件定义的状态名必须保持和父级组件的传值参数名一致（ 如下图5） 。

​

::: hljs-center

图5

:::

更多原创内容请关注：深开鸿技术团队

入门到精通、技巧到案例，系统化分享HarmonyOS开发技术，欢迎投稿和订阅，让我们一起携手前行共建鸿蒙生态。