组件复用提升性能,不小心可能踩的坑,注意避让
组件复用提升性能,不小心可能踩的坑,注意避让
HarmonyOS
赞
收藏 0
回答 1
待解决
相关问题
不小心把entry下面的build和preview删了,怎么生成?
382浏览 • 1回复 待解决
组件可见区域变化事件onVisibleAreaChange踩过的坑
237浏览 • 1回复 待解决
不小心执行了一个update没有带where。。
3062浏览 • 2回复 待解决
性能优化中的组件复用原理是什么
552浏览 • 1回复 待解决
Swiper是否支持组件复用
334浏览 • 1回复 待解决
赋值会导致降低组件的复用性能。
496浏览 • 1回复 待解决
复用组件reuseId作用是什么
202浏览 • 1回复 待解决
Redis Key的注意点是什么?
1802浏览 • 1回复 待解决
loaddata api注意事项
421浏览 • 1回复 待解决
ArkTS在代码执行效率是如何提升的
617浏览 • 1回复 待解决
如何实现键盘避让机制
1025浏览 • 1回复 待解决
TairHash相较于Redis Hash的提升有哪些?
1936浏览 • 1回复 待解决
组件需要多次更新时如何优化性能
701浏览 • 1回复 待解决
List组件性能问题,有人知道吗?
582浏览 • 1回复 待解决
ArkTS静态类型开发时的注意事项
836浏览 • 1回复 待解决
学习鸿蒙我们应该注意什么
3844浏览 • 1回复 待解决
如何实现弹窗和软键盘的避让
510浏览 • 1回复 待解决
组件需要多次更新时,如何优化性能
591浏览 • 1回复 待解决
组件设置属性能否使用if判断是否设置某个属性
450浏览 • 1回复 待解决
SQL相同的两个子查询如何复用?
1453浏览 • 2回复 待解决
组件扩展的样式中的代码基本相同,是否存在其他可以复用这部分代码的方式?
353浏览 • 1回复 待解决
字体库文件如何复用?
2218浏览 • 1回复 待解决
鸿蒙怎么实现UI控件样式复用 ?
6225浏览 • 3回复 待解决
uiextension为什么不会避让顶部状态栏
272浏览 • 1回复 待解决
是否有衡量页面性能的 API?
205浏览 • 1回复 待解决
组件复用可以大大提升应用的帧率性能。但是如果使用不小心,可能会引入功能问题。
遇到的问题:组件复用后,应用列表中按钮的状态出现了错乱。比如页面中的按钮状态本来应该是“打开”,因为这个应用已经安装了,但是却显示成了“安装”。
问题分析:
1:问题是出现在组件复用之后,所以怀疑组件复用导致的问题。
2:分析布局结构:应用布局结构是一个NoralCard自定义组件,且是一个复用单元。
并且通过日志观察,应用的组件是复用过的,并且是复用了另外一个未安装的应用。 页面上其他元素如:ICON,应用名称等都是正确,只有按钮状态不符合预期,于是分析代码发现:安装按钮也是应用自定义的一个组件(DownloadButton),也就是DownloadButton是NormalCard的子组件。
3:代码分析:NormalCard中的引用子组件DonwloadButton的代码如下:
如组件复用指导中所提:父组件中cardData增加了状态变量,cardData变化之后,相应的组件会自动刷新。但是由于DownloadButton是自定义组件,DownloadButton接收cardData的变量appInfo是一个普通变量,没有支持父子组件数据传递的状态变量。因此即使父组件中cardData数据变化了,也没有传递给子子组件DownloadButton。
4:修改方案:将子组件DownloadButton中接收父组件数据变化的成员变量:appInfo增加数据同步的状态变量:@Link,同时增减监听事件,变化之后,需要根据appInfo刷新按钮的状态。
5:修改过程中数据同步遇到的问题:一开始考虑业务只需要单向同步:用的@Prop。但是用@Prop之后丢帧更严重中了。通过trace发现。数据同步过程中有大量的数据copy。且由于NormalCardData数据类型嵌套较深,且@Prop是深度copy,导致性能特别差:复用占用了33ms。如下图所示:
6:继续优化:通过与OH 数据同步的同事了解,@Prop是通过数据深度copy完成的数据同步,他们建议如果数据大可以使用@Link进行数据同步,@Link是通过指向同一份地址的方式完成数据同步。修改为@link后,复用效果大大提升。由33MS->2.9MS ,性能有10倍提升。
总结:
1:组件复用要考虑组件中所有元素数据是否都进行了合理的刷新,如果涉及自定义组件,自定义组件涉及的UX变更需要通过数据同步的方式,通知子组件变更,子组件需要根据父组件数据通知的变化,完成本身的UX刷新。
2: 数据同步过程需要根据自己的应用场景选择合适的数据同步状态变量。特别注意@Prob@Link。 @Prop为深度copy的方式,@Link是通过共享数据内存的方式。性能差异较大。