Harmony-状态管理1

134 阅读3分钟

@State装饰器:组件内状态

1.概念:该装饰器装饰的变量称为状态变量,一旦变量拥有了状态属性,就可以触发其直接绑定UI组件的刷新,当状态改变时,UI也会发生对应的渲染改变。 2.特点:

  • @State装饰的变量与子组件中的@Prop装饰变量之间建立单向数据同步,与@Link、@ObjectLink装饰变量之间建立双向数据同步;
  • @State装饰的变量生命周期与其所属自定义组件的生命周期相同;
  • @State装饰的变量必须初始化。

3.使用场景:

  • 装饰的变量为boolean、string、number类型,可以观察到数值的变化;
  • 装饰的数据的类型为class或object时,可以观察到自身的变化和其属性赋值的变化,其嵌套属性的赋值观察不到;
  • 当装饰的对象是array时,可以观察到数组本身的赋值和添加、删除、更新数组的变化;
  • 当装饰的对象是Date时,可以观察到Date整体的赋值;
  • 当装饰的变量是Map时,可以观察到Map整体的赋值;
  • 当装饰的变量是Set时,可以观察到Set整体的赋值;

4.常见bug

  • 使用箭头函数改变状态变量未生效:箭头函数体内的this指向问题(指向的是定义该函数时所在的作用域指向的对象,而不是使用时所在的作用域指向的对象)
  • 状态变量的修改放在构造函数内未生效(在状态管理中,类会被一层“代理”进行包装。当在组件中改变该类的成员变量时,会被该代理进行拦截,在构造函数中,还未被代理)
  • 复杂类型常量重复赋值给状态变量触发刷新(@State修饰的Class、Date、Map、Set、Array等复杂类型时会添加一层代理proxy,和原来的object对象判断是不相等的)【解决:方法一:增加@Observed;方法二:使用UIUtils.getTarget()获取原始对象后在进行比较】
  • 不允许在build里改变状态变量(可能会造成多次渲染开销问题)

@Prop装饰器:父子单向同步

1.概念:@Prop装饰的变量和父组件建立单向的同步关系,当数据更改时,@Prop装饰的变量都会更新,并且会覆盖本地所有更改。

2.特点:

  • @Prop本地初始化不和父组件同步;
  • @Prop支持本地初始化,故@Prop是否与父组件建立同步关系是可选的(当@Prop有本地初始化时)

3.使用场景:

  • 父组件@State到子组件@Prop简单数据类型同步;
  • 父组件@State数组项到子组件@Prop简单数据类型同步;
  • 父组件中的@State类对象属性到@Prop简单类型同步;
  • 父组件中@State数组项到@Prop class类型的同步;
  • 在嵌套场景下,每一层都要用@Observed装饰

4.常见bug:

  • @Prop装饰状态变量未初始化错误(必须通过父组件传递)
  • 使用a.b(this.object)形式调用,不会触发UI刷新 【解决:先赋值添加proxy代理,再调用新赋值的变量为原有对象加上proxy代理】

问题:当从接口请求得到的对象类型数组如何实现视图层和逻辑层的双向同步???