@State装饰器:组件内状态
概述
@State装饰的变量,是私有的,只能从组件内部访问,声明时要指定类型和初始化。
@State装饰的变量拥有以下的特点:
●@State装饰的变量与子组件中的@Prop装饰的变量之间建立数据的单项同步,与@Link、@ObjectLink装饰的变量建立双向数据同步。
●@State装饰的变量的生命周期与其所属自定组件的生命周期相同。
装饰器的使用规则说明

变量的传递/访问规则说明

观察变化和行为表现
并不是状态变量的所有改变都会引起UI的刷新,只有可以被框架观察到的修改才会引起UI刷新。
观察变化
●当装饰的数据类型为boolean、string、number类型时,可以观察到数值的变化。
●当装饰的数据类型为class或者Object时,能观察到自身的赋值变化,属性的赋值变化,但是不能观察到嵌套类型的赋值变化。
●当装饰的对象是array时,能观察到自身的赋值和添加、删除、更新数组的变化。数组项中属性的赋值观察不到(也是嵌套问题)
框架行为
●当状态变量被改变时,查询依赖该状态变量的组件
●执行依赖该状态变量的组件的更新方法,组件更新渲染
●和该状态变量不相关的组件或者UI描述,不会发生重新渲染,从而实现页面渲染的按需更新
@Prop装饰器:父子单项同步
概述
@Prop装饰的变量和父组件建立单向体同步关系:
●@Prop变量允许在本地修改,但修改之后不会同步给父组件
●当父组件的数据产生变化的时候,与之相关的@Prop修饰的变量会自动更新。
限制条件
@Prop装饰器不能在@Entry装饰的自定义组件中使用。(因为@Entry声明的含义是入口组件,所以没有父组件)(个人理解)
装饰器使用规则说明

变量的传递/访问规则说明

观察变化和行为表现
观察变化
@Prop装饰的数据可以观察到以下变化:
●当装饰的类型是允许类型,即string、number、boolean、enum类型都可以观察到赋值的变化。
对于@State和@Prop的同步场景
●使用父组件中的@State变量的值初始化子组件中的@Prop变量。当@State变量变化时,该变量的值也会同步更新至@prop变量
●@Pro装饰的变量的修改不会影响其数据源@State装饰变量的值
●除了@State,数据源也可以用@Link或者@Prop装饰,对@Prop的同步机制是相同的
数据源和@Prop变量的类型需要相同
框架行为
要理解@Prop变量值初始化和更新机制,有必要了解父组件和拥有@Prop变量的子组件初始渲染和更新流程
初始渲染:
1.执行父组件的build()函数将创建子组件的新实例,将数据源传递给子组件。
2.初始化子组件@Prop装饰的变量。
更新:
1.子组件@Prop更新时,更新仅停留在当前子组件,不会同步回父组件。
2.当父组件的数据源更新时,子组件的@prop装饰的变量将被来自父组件的数据源重置,所有@Prop装饰的本地的修改将被父组件的更新覆盖。

最低0.47元/天 解锁文章
1076

被折叠的 条评论
为什么被折叠?



