ets:状态管理汇总。

内容分享3天前发布
1 0 0

@State

标记的变量必须初始化,不能为空值。
支持 对象Object、class、string、number、boolean、enum类型以及这些类型的数组。
嵌套对象以及数组中的对象属性,无法触发视图更新。

对象的属性变化了,会更新渲染UI;但是对象的对象的属性发生了变化,不会更新UI。

数组内是对象,对象列表修改了(对象增删、覆盖),会重新渲染UI;
但是对象内的属性变化了,不会重新渲染UI。

@Prop, @Link

@Prop单向同步

  • 只支持string,number,boolean,enum等类型。
  • 父组件对象类型,子组件是对象属性。
  • 不可以是数组、any。
  • 不允许子组件初始化。

@Link双向同步

  • 父子类型要一致:string,number,boolean,enum,object,class,以及他们的数组。
  • 数组中元素增删改,会引起刷新。
  • 嵌套类型以及数组中的对象属性,无法触发尝试更新。
  • 父组件传递,禁止子组件自己初始化。

@Provider,@Consume

类似State,Link的用法,
跨组件的双向数据同步。
不需要显式的、手动的传递数据。
代码简化,但是效率会损耗。

父组件中:提供

@Provide stat:StateInfo = new StateInfo();
build() {
    TaskStatistic()
    TaskList()
}
    
子组件中:直接消费
@Consume stat:StateInfo; 
// 取出值
Text(this.stat.finishTask.toString())

@Observed 和 @ObjectLink

@Observed 和 @ObjectLink 装饰器,用于在涉及 嵌套对象数组元素为对象 的场景中进行双向数据同步。

@Observed  // 添加装饰器。
class Person {
    name: string
    age: number
    gf: Person
    constructor(name: string, age: number, gf?: Person) {
        this.name = name
        this.age = age
        this.gf = gf
    }
}    

// 抽取:嵌套对象处理。便于添加修饰符 @ObjectLink
@Component
struct Child {
    @ObjectLink p:Person; // 给变量添加 @ObjectLink 修饰符。
    build() {
        Column() {
            Text(`s{this.p.gf.name} : $[this.p.gf.age],`)
        }
    }
}

@Entry
@Component
struct Parent {
    @State p: Person = new Person( Jack , 21, new Person( Rose , 18));
    @State gfs: Person[] = [
        new Person("Lily", 18),
        new Person("Lucy", 19),
    ];

    build(){
        Column() {
            Child({p: this.p.gf} )
            .onClick(() => this.p.gf.age++)
            Text( ------女朋友列表------- )
            ForEach(this.gfs,
                p => {
                    Child({p:p}).onClick(() => p.age++)
                })
        }
    }
}

© 版权声明

相关文章

暂无评论

none
暂无评论...