组件状态修改与build渲染机制

组件状态修改与build渲染机制

HarmonyOS
2024-05-26 15:50:23
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
vclearner

组件的创建,销毁和更新阶段

组件创建和销毁过程是一个组件入栈和出栈的顺序,创建过程对组件树结构采用深度优先方式遍历,入下图所示,遍历顺序为:1-2-3-4-5-6-7-8-9

组件创建阶段

组件销毁阶段

组件更新

组件更新采用最小更新原则,父组件状态变更并触发build方法时,同样采用深度优先方式遍历。

组件更新由组件状态控制,ArkTS提供了多维度的状态管理机制,在UI开发框架中,和UI相关联的数据,不仅可以在组件内使用,还可以在不同组件层级间传递,比如父子组件之间、爷孙组件之前,也可以是全局范围内的传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。



从父组件中的变量(下)到子组件中的变量(右)




@State




@Link




@Prop




常规变量


@State

不允许

允许

允许

允许

@Link

不允许

允许

不推荐

允许

@Prop

不允许

不允许

允许

允许

@StorageLink

不允许

允许

不允许

允许

@StorageProp

不允许

不允许

不允许

允许

常规变量

允许

不允许

不允许

允许


父组件(状态变更) --> 子组件

1.  当子组件未定义状态变量时(只定义常规变量或未定义变量),父组件执行build方法,将不会触发子组件的build

2.  当子组件中定义了状态变量,不管是否是由父组件赋值已经子组件是否使用,父组件的build方法执行时,都将触发子组件build

3.  组件定义的状态变量在build中未使用,当前组件状态变化时,build方法不会执行,但是使用@Prop时有下述例外情况

父组件状态变量,在组件内其他地方未使用时,仅作为子组件的属性传递时,使用@Prop的子组件在触发build方法前,会调用父组件也会调用build,但@Link不存在该情况

子组件(状态变更) --> 父组件

仅有@Link修改的状态变量可以同步给父组件,@Prop状态修改仅在当前组件及其子组件生效


使用ForEach遍历Array<class>类型状态变量时,Array数据结构做增、删和替换操作都会触发组件更新,但是以下情况下ForEach内@Component装饰子组件无法更新:

1. 若只需要修改Array某一项class中的属性,形如arr[0].name = xxx方式修改,不会触发当前组件及子组件build方法(当前组件build不执行,子组件也不执行)

2. 修改array中某项数据arr[0] = xxx,该项数据作为ForEach中第三个参数唯一索引没有变化,则子组件也无法重渲染(当前组件build执行,子组件不执行)

使用@Observe和@ObjectLink可以避免该问题

修改Array<class>数据类型class中某个属性,页面初始化动作如下图所示

@State修改的状态变量作为复杂数据时,往下传递其中部分属性,子组件可以使用下列方式接收

基本数据类型:@Prop, @State

引用数据类型:@ObjectLink/@Observe, @State

分享
微博
QQ
微信
回复
2024-05-27 21:00:08
相关问题
ArkUI节点模型和渲染机制
369浏览 • 1回复 待解决
WebView进程模型和渲染机制是什么
811浏览 • 1回复 待解决
组件如何孙子组件进行状态同步
896浏览 • 1回复 待解决
ArkTS异步机制执行顺序
298浏览 • 1回复 待解决
Image组件是否有缓存机制
444浏览 • 1回复 待解决
鸿蒙怎么 修改状态栏字体颜色
10718浏览 • 1回复 待解决
ListItem 组件渲染错误空白内容
387浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
462浏览 • 1回复 待解决
Web组件是否支持离屏渲染
588浏览 • 0回复 待解决
如何选择Navigation 组件 Tabs 组件
818浏览 • 1回复 待解决
组件组件使用@Link双向同步
354浏览 • 1回复 待解决
ArkUI 中如何设置组件的悬停状态
575浏览 • 1回复 待解决
TextInput组件输入状态下隐藏光标
442浏览 • 1回复 待解决
popup组件气泡框指向颜色怎么修改
5710浏览 • 1回复 待解决
如何获取UI组件的显示或隐藏状态
707浏览 • 1回复 待解决