鸿蒙开发之状态管理

@State 组件内状态

• @State装饰的变量，会和自定义组件的渲染绑定起来。当状态改变时，UI会发生对应的渲染改变。
• 在状态变量相关装饰器中，@State是最基础的，使变量拥有状态属性的装饰器，它也是大部分状态变量的数据源。

装饰器使用规则

• 同步类型：不与父组件中任何类型的变量同步。
• 允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组，且类型必须被指定。
• 被装饰变量的初始值：必须本地初始化。

变量的传递/访问规则

• 从父组件初始化：可选，从父组件初始化或者本地初始化。如果从父组件初始化将会覆盖本地初始化。但实际上编辑器并不希望你这样做，代码不会报错但是会划红线提示。
• 用于初始化子组件：@State装饰的变量支持初始化子组件的常规变量、@State、@Link、@Prop、@Provide。
• 是否支持组件外访问：不支持，只能在组件内访问。

观察变化和行为表现

• 并不是状态变量的所有更改都会引起UI的刷新，只有可以被框架观察到的修改才会引起UI刷新。
• 当装饰的数据类型为boolean、string、number类型时，可以观察到数值的变化。
• 当装饰的数据类型为class或者Object时，可以观察到自身的赋值的变化，和其属性赋值的变化。
• 当装饰的对象是array时，可以观察到数组本身的赋值和添加、删除、更新数组的变化。

@Props 父组件传入的状态 - 单向同步

• @Prop变量允许在本地修改，但修改后的变化不会同步回父组件。
• 当父组件中的数据源更改时，与之相关的@Prop装饰的变量都会自动更新。
• 如果子组件已在本地修改了@Prop变量，而在父组件中对应的@State变量被修改后，子组件本地修改的@Prop变量值将被覆盖。
• @Prop装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

• 同步类型：单向同步。
• 允许装饰的变量类型：string、number、boolean、enum类型。不支持any，必须指定类型。
• 被装饰变量的初始值：允许本地初始化。

变量的传递/访问规则

• 从父组件初始化：如果本地有初始化，则是可选的（但这种方式编辑器会报etslint错误）。没有的话，则必选
• 用于初始化子组件：@Prop支持去初始化子组件中的常规变量、@State、@Link、@Prop、@Provide。
• 是否支持组件外访问：不支持，只能在组件内访问。

思考：如何单向绑定非简单类型数据？

@Link 父子组件共用的状态 - 双向同步

• 子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
• @Link装饰器不能在@Entry装饰的自定义组件中使用。

装饰器使用规则

• 同步类型：双向同步。
• 允许装饰的变量类型：Object、class、string、number、boolean、enum类型，以及这些类型的数组。类型必须被指定，且和双向绑定状态变量的类型相同。
• 被装饰变量的初始值：禁止本地初始化。

变量的传递/访问规则

• 从父组件初始化和更新：必选
• 用于初始化子组件：允许，可用于初始化常规变量、@State、@Link、@Prop、@Provide。
• 是否支持组件外访问：私有，只能在所属组件内访问。

@Provide 与 @Consume 跨组件双向通信

• @Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
• 后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
• @Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。

// 通过相同的变量名绑定
@Provide a: number = 0;
@Consume a: number;

// 通过相同的变量别名绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;

装饰器说明

• @State的规则同样适用于@Provide，差异为@Provide还作为多层后代的同步源。
• @Link的规则同样适用于@Consume，差异为@Consume可在多层父代的找到同步源。

变量的传递/访问规则

@Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

• @ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步

• 被@Observed装饰的类，可以被观察到属性的变化

• 子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。

• 单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。

• 具体用法看Demo5、Demo6

AppStorage：应用全局的UI状态存储

• AppStorage是在应用启动的时候会被创建的单例。它提供应用状态数据的中心存储。
• 这些状态数据在应用级别都是可访问的，属性通过唯一的键字符串值访问。
• AppStorage中的属性可以被双向同步

@StorageLink-双向同步

@StorageProp-单向同步

PersistentStorage：持久化存储UI状态

• PersistentStorage的作用是持久化存储选定的AppStorage属性，以确保这些属性在应用程序重新启动时的值与应用程序关闭时的值相同。

@Watch装饰器：状态变量更改通知

• @Watch用于监听状态变量的变化，当状态变量变化时，@Watch的回调方法将被调用。
• @Watch在ArkUI框架内部判断数值有无更新使用的是严格相等（===）
• 对象类型的属性修改，以及数组类型的修改，均会触发@Watch