往期鸿蒙全套实战精彩文章必看内容:
概述
若开发者的应用中存在以下场景,并成为UI线程的帧率瓶颈,应该考虑使用组件复用机制提升应用性能:
- 列表滚动(本例中的场景):当应用需要展示大量数据的列表,并且用户进行滚动操作时,频繁创建和销毁列表项的视图可能导致卡顿和性能问题。在这种情况下,使用列表组件的组件复用机制可以重用已经创建的列表项视图,提高滚动的流畅度。
- 动态布局更新:如果应用中的界面需要频繁地进行布局更新,例如根据用户的操作或数据变化动态改变视图结构和样式,重复创建和销毁视图可能导致频繁的布局计算,影响帧率。在这种情况下,使用组件复用可以避免不必要的视图创建和布局计算,提高性能。
- 地图渲染:在地图渲染这种场景下,频繁创建和销毁数据项的视图可能导致性能问题。使用组件复用可以重用已创建的视图,只更新数据的内容,减少视图的创建和销毁,能有效提高性能。
HarmonyOS应用框架提供了组件复用能力:可复用组件从组件树上移除时,会进入到一个回收缓存区,后续创建新组件节点时,会复用缓存区中的节点,节约组件重新创建的时间。
本文会介绍如何使用组件复用机制提升应用帧率。
组件复用原理与使用
原理介绍
组件复用机制如下:
- 标记为@Reusable的组件从组件树上被移除时,组件和其对应的JSView对象都会被放入复用缓存中。
- 当列表滑动新的ListItem将要被显示,List组件树上需要新建节点时,将会从复用缓存中查找可复用的组件节点。
- 找到可复用节点并对其进行更新后添加到组件树中。从而节省了组件节点和JSView对象的创建时间。
图1 组件复用原理图
说明
需要注意的是,虽然这里是使用List组件进行举例,但是不代表组件复用只能用在滚动容器里,只要是发生了相同自定义组件销毁和再创建的场景,都可以使用组件复用。
使用规则
组件复用的示例代码如下:
// xxx.ets
export class Message {
value: string | undefined;
constructor(value: string) {
this.value = value
}
}
@Entry
@Component
struct Index {
@State switch: boolean = true
build() {
Column() {
Button('Hello World')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
this.switch = !this.switch
})
if (this.switch) {
Child({ message: new Message('Child') })
// 如果只有一个复用的组件,可以不用设置reuseId
.reuseId('Child')
}
}
.height("100%")
.width('100%')
}
}
@Reusable
@Component
struct Child {
@State message: Message = new Message('AboutToReuse');
aboutToReuse(params: Record<string, ESObject>) {
console.info("Recycle Child")
this.message = params.message as Message
}
build() {
Column() {
Text(this.message.value)
.fontSize(20)
}
.borderWidth(2)
.height(100)
}
}
1.@Reusable:自定义组件被@Reusable装饰器修饰,即表示其具备组件复用的能力。
2.aboutToReuse:当一个可复用的自定义组件从复用缓存中重新加入到节点树时,触发aboutToReuse生命周期回调,并将组件的构造参数传递给aboutToReuse。
3.reuseId:用于标记自定义组件复用组,当组件回收复用时,复用框架将根据组件的reuseId来划分组件的复用组。如果只有一个复用的组件,可以不用设置reuseId。
组件复用优化方法
减少组件复用的嵌套层级
在组件复用场景下,过深的自定义组件的嵌套会增加组件复用的使用难度,比如需要逐个实现所有嵌套组件中aboutToReuse回调实现数据更新;因此推荐优先使用@Builder替代自定义组件,减少嵌套层级,利于维护且能提升页面加载速度。正反例如下:
反例:
@Entry
@Component
struct lessEmbeddedComponent {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMomentNoBuilder({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMomentNoBuilder {
@Prop moment: FriendMoment;
// 无需对@Prop修饰的变量进行aboutToReuse赋值,因为这些变量是由父组件传递给子组件的。如果在子组件中重新赋值这些变量,会导致重用的组件的内容重新触发状态刷新,从而降低组件的复用性能。
build() {
...
// 在复用组件中嵌套使用自定义组件
Row() {
InteractiveButton({
imageStr: $r('app.media.ic_share'),
text: $r('app.string.friendMomentsPage_share')
})
Blank()
InteractiveButton({
imageStr: $r('app.media.ic_thumbsup'),
text: $r('app.string.friendMomentsPage_thumbsup')
})
Blank()
InteractiveButton({
imageStr: $r('app.media.ic_message'),
text: $r('app.string.friendMomentsPage_message')
})
}
...
}
}
@Component
export struct InteractiveButton {
@State imageStr: ResourceStr;
@State text: ResourceStr;
// 嵌套的组件中也需要实现aboutToReuse来进行UI的刷新
aboutToReuse(params: Record<string, Object>): void {
this.imageStr = params.imageStr as ResourceStr;
this.text = params.text as ResourceStr;
}
build() {
Row() {
Image(this.imageStr)
Text(this.text)
}
.alignItems(VerticalAlign.Center)
}
}
上述反例的操作中,在复用的自定义组件中嵌套了新的自定义组件。ArkUI中使用自定义组件时,在build阶段将在在后端FrameNode树创建一个相应的CustomNode节点,在渲染阶段时也会创建对应的RenderNode节点。会造成组件复用下,CustomNode创建和RenderNod渲染的耗时。且嵌套的自定义组件InteractiveButton,也需要实现aboutToReuse来进行数据的刷新。
正例:
@Entry
@Component
struct lessEmbeddedComponent {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
build() {
...
// 使用@Builder,可以减少自定义组件创建和渲染的耗时
Row() {
interactiveButton({
imageStr: $r('app.media.ic_share'),
text: $r('app.string.friendMomentsPage_share')
})
Blank()
interactiveButton({
imageStr: $r('app.media.ic_thumbsup'),
text: $r('app.string.friendMomentsPage_thumbsup')
})
Blank()
interactiveButton({
imageStr: $r('app.media.ic_message'),
text: $r('app.string.friendMomentsPage_message')
})
}
...
}
}
class Temp {
imageStr: ResourceStr = '';
text: ResourceStr = '';
}
@Builder
export function interactiveButton($$: Temp) {
Row() {
// 此处使用$$来进行按引用传递,让@Builder感知到数据变化,进行UI刷新
Image($$.imageStr)
Text($$.text)
}
}
上述正例的操作中,在复用的自定义组件中用@Builder来代替了自定义组件。避免了CustomNode节点创建和RenderNode渲染的耗时。
优化状态管理,精准控制组件刷新范围使用
1.使用attributeUpdater精准控制组件属性的刷新,避免组件不必要的属性刷新。
复用场景常用在高频的刷新场景,精准控制组件的刷新范围可以有效减少主线程渲染负载,提升滑动性能。正反例如下:
反例:
@Component
export struct LessEmbeddedComponent {
aboutToAppear(): void {
momentData.getFriendMomentFromRawfile();
}
build() {
Column() {
Text('use nothing')
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMomentNoModifier({ color: moment.color })
.onClick(() => {
console.log(`my id is ${moment.id}`)
})
}
}, (moment: FriendMoment) => moment.id)
}
.width("100%")
.height("100%")
.cachedCount(5)
}
}
}
@Reusable
@Component
export struct OneMomentNoModifier {
@State color: string | number | Resource = "";
aboutToReuse(params: Record<string, Object>): void {
this.color = params.color as number;
}
build() {
Column() {
Text('这是标题')
Text('这是内部文字')
.fontColor(this.color)// 此处使用属性直接进行刷新,会造成Text所有属性都刷新
.textAlign(TextAlign.Center)
.fontStyle(FontStyle.Normal)
.fontSize(13)
.lineHeight(30)
.opacity(0.6)
.margin({ top: 10 })
.fontWeight(30)
.clip(false)
.backgroundBlurStyle(BlurStyle.NONE)
.foregroundBlurStyle(BlurStyle.NONE)
.borderWidth(1)
.borderColor(Color.Pink)
.borderStyle(BorderStyle.Solid)
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': 'image', 'align': HorizontalAlign.End }
})
}
}
}
上述反例的操作中,通过aboutToReuse对fontColor状态变量更新,进而导致组件的全部属性进行刷新,造成不必要的耗时。可以考虑对需要更新的组件的属性,进行精准刷新,避免不必要的重绘和渲染。
正例:
import { AttributeUpdater } from '@ohos.arkui.modifier';
export class MyTextUpdater extends AttributeUpdater<TextAttribute> {
private color: string | number | Resource = "";
constructor(color: string | number | Resource) {
super();
this.color = color
}
initializeModifier(instance: TextAttribute): void {
instance.fontColor(this.color) // 差异化更新
}
}
@Component
export struct UpdaterComponent {
aboutToAppear(): void {
momentData.getFriendMomentFromRawfile();
}
build() {
Column() {
Text('use MyTextUpdater')
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMomentNoModifier({ color: moment.color })
.onClick(() => {
console.log(`my id is ${moment.id}`)
})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(5)
}
}
}
@Reusable
@Component
export struct OneMomentNoModifier {
color: string | number | Resource = "";
textUpdater: MyTextUpdater | null = null;
aboutToAppear(): void {
this.textUpdater = new MyTextUpdater(this.color);
}
aboutToReuse(params: Record<string, Object>): void {
this.color = params.color as string;
this.textUpdater?.attribute?.fontColor(this.color);
}
build() {
Column() {
Text('这是标题')
Text('这是内部文字')
.attributeModifier(this.textUpdater) // 采用attributeUpdater来对需要更新的fontColor属性进行精准刷新,避免不必要的属性刷新。
.textAlign(TextAlign.Center)
.fontStyle(FontStyle.Normal)
.fontSize(13)
.lineHeight(30)
.opacity(0.6)
.margin({ top: 10 })
.fontWeight(30)
.clip(false)
.backgroundBlurStyle(BlurStyle.NONE)
.foregroundBlurStyle(BlurStyle.NONE)
.borderWidth(1)
.borderColor(Color.Pink)
.borderStyle(BorderStyle.Solid)
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': 'image', 'align': HorizontalAlign.End }
})
}
}
}
上述正例的操作中,通过attributeUpdater属性来对Text组件需要刷新的fontColor属性进行精准刷新,避免Text其它不需要更改的属性的刷新。
2.使用@Link/@ObjectLink替代@Prop减少深拷贝,提升组件创建速度
在父子组件数据同步时,如果仅仅是需要父组件向子组件同步数据,不存在子组件数据变化不同步给父组件的场景。建议使用@Link/@ObjectLink替代@Prop,@Prop在装饰变量时会进行深拷贝,在拷贝的过程中除了基本类型、Map、Set、Date、Array外,都会丢失类型。正反例如下:
反例:
@Entry
@Component
struct lessEmbeddedComponent {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
build() {
Column() {
...
Text(`${this.moment.userName}`)
...
}
}
}
export const momentData: FriendMomentsData = new FriendMomentsData();
export class FriendMoment {
id: string;
userName: string;
avatar: string;
text: string;
size: number;
image?: string;
constructor(id: string, userName: string, avatar: string, text: string, size: number, image?: string) {
this.id = id;
this.userName = userName;
this.avatar = avatar;
this.text = text;
this.size = size;
if (image !== undefined) {
this.image = image;
}
}
}
上述反例的操作中,父子组件之间的数据同步用了@Prop来进行,各@Prop装饰的变量在初始化时都在本地拷贝了一份数据。会增加创建时间及内存的消耗,造成性能问题。
正例:
@Entry
@Component
struct lessEmbeddedComponent {
@State momentData: FriendMomentsData = new FriendMomentsData();
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@ObjectLink moment: FriendMoment;
build() {
Column() {
...
Text(`${this.moment.userName}`)
...
}
}
}
@Observed
export class FriendMoment {
id: string;
userName: string;
avatar: string;
text: string;
size: number;
image?: string;
constructor(id: string, userName: string, avatar: string, text: string, size: number, image?: string) {
this.id = id;
this.userName = userName;
this.avatar = avatar;
this.text = text;
this.size = size;
if (image !== undefined) {
this.image = image;
}
}
}
上述正例的操作中,父子组件之间的数据同步用了@ObjectLink来进行,子组件@ObjectLink包装类把当前this指针注册给父组件,会直接将父组件的数据同步给子组件,实现父子组件数据的双向同步,降低子组件创建时间和内存消耗。
3.避免对@Link/@ObjectLink/@Prop等自动更新的状态变量,在aboutToReuse方法中再进行更新
在父子组件数据同步时,如果子组件已经使用了@Link/@ObjectLink/@Prop等会自动同步父子组件数据且驱动组件刷新的状态变量。则不需要再在aboutToReuse方法中再进行数据更新,此操作会造成不必要的方法执行和变量更新的耗时。正反例如下:
反例:
@Entry
@Component
struct LessEmbeddedComponent {
@State momentData: FriendMomentsData = new FriendMomentsData();
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
// 该类型的状态变量已包含自动刷新功能,不需要再重复进行刷新
@ObjectLink moment: FriendMoment;
// 此处aboutToReuse为多余刷新
aboutToReuse(params: Record<string, Object>): void {
this.moment.id = (params.moment as FriendMoment).id
this.moment.userName = (params.moment as FriendMoment).userName
this.moment.avatar = (params.moment as FriendMoment).avatar
this.moment.text = (params.moment as FriendMoment).text
this.moment.image = (params.moment as FriendMoment).image
}
build() {
Column() {
...
Text(`${this.moment.userName}`)
...
}
}
}
@Observed
export class FriendMoment {
id: string;
userName: string;
avatar: string;
text: string;
size: number;
image?: string;
constructor(id: string, userName: string, avatar: string, text: string, size: number, image?: string) {
this.id = id;
this.userName = userName;
this.avatar = avatar;
this.text = text;
this.size = size;
if (image !== undefined) {
this.image = image;
}
}
}
上述反例的操作中,子组件中moment变量被@ObjectLink修饰,把当前this指针注册给父组件,会直接将父组件的数据同步给子组件,实现数据刷新。重新在aboutToReuse中刷新,如果刷新涉及的变量较多、变量中成员变量复杂,可能会造成较大性能开销。
正例:
@Entry
@Component
struct LessEmbeddedComponent {
@State momentData: FriendMomentsData = new FriendMomentsData();
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@ObjectLink moment: FriendMoment;
build() {
Column() {
...
Text(`${this.moment.userName}`)
...
}
}
}
@Observed
export class FriendMoment {
id: string;
userName: string;
avatar: string;
text: string;
size: number;
image?: string;
constructor(id: string, userName: string, avatar: string, text: string, size: number, image?: string) {
this.id = id;
this.userName = userName;
this.avatar = avatar;
this.text = text;
this.size = size;
if (image !== undefined) {
this.image = image;
}
}
}
上述正例的操作中,子组件中moment变量被@ObjectLink修饰,把当前this指针注册给父组件,会直接将父组件的数据同步给子组件,实现数据刷新。
复用组件嵌套结构会变更的场景,使用reuseId标记不同结构的组件构成
在自定义组件复用的场景中,如果使用if/else条件语句来控制布局的结构,会导致在不同逻辑创建不同布局结构嵌套的组件,从而造成组件树结构的不同。此时我们应该使用reuseId来区分不同结构的组件,确保系统能够根据reuseId缓存各种结构的组件,提升复用性能。正反例如下:
反例:
@Entry
@Component
struct withoutReuseId {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({
moment: moment,
fontSize: moment.size
})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
build() {
Column() {
...
Text(this.moment.text)
if (this.moment.image !== '') {
Flex({ wrap: FlexWrap.Wrap }) {
Image($r(this.moment.image))
Image($r(this.moment.image))
Image($r(this.moment.image))
Image($r(this.moment.image))
}
}
...
}
}
}
上述反例的操作中,通过if来控制组件树走不同的分支,分别选择是否创建Flex组件。导致更新if分支时仍然可能走删除重创的逻辑。考虑采用根据不同的分支设置不同的reuseId来提高复用的性能。
正例:
@Entry
@Component
struct withoutReuseId {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({moment: moment})
// 使用reuseId进行组件复用的控制
.reuseId((moment.image !== '') ? 'withImage' : 'noImage')
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
build() {
Column() {
...
Text(this.moment.text)
if (this.moment.image !== '') {
Flex({ wrap: FlexWrap.Wrap }) {
Image($r(this.moment.image))
Image($r(this.moment.image))
Image($r(this.moment.image))
Image($r(this.moment.image))
}
}
...
}
}
}
上述正例的操作中,通过reuseId来标识需要复用的组件,省去重复执行if的删除重创逻辑,提高组件复用的效率和性能。
避免使用函数/方法作为复用组件创建时的入参
由于在组件复用的场景下,每次复用都需要重新创建组件关联的数据对象,导致重复执行入参中的函数来获取入参结果。如果函数中存在耗时操作,会严重影响性能。正反例如下:
反例:
@Entry
@Component
struct withFuncParam {
aboutToAppear(): void {
getFriendMomentFromRawfile();
}
// 真实场景的函数中可能存在未知的耗时操作逻辑,此处用循环函数模拟耗时操作
countAndReturn(): number {
let temp: number = 0;
for (let index = 0; index < 100000; index++) {
temp += index;
}
return temp;
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
OneMoment({
moment: moment,
sum: this.countAndReturn()
})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
@State sum: number = 0;
aboutToReuse(params: Record<string, Object>): void {
this.sum = params.sum as number;
}
build() {
Column() {
...
Text(`${this.moment.userName} (${this.moment.id} / ${this.sum})`)
...
}
}
}
上述反例的操作中,复用的子组件参数sum是通过耗时函数生成。该函数在每次组件复用时都需要执行,会造成性能问题,甚至是列表滑动过程中的卡顿丢帧现象。
正例:
@Entry
@Component
struct withFuncParam {
@State sum: number = 0;
aboutToAppear(): void {
getFriendMomentFromRawfile();
// 执行该异步函数
this.countAndRecord();
}
// 真实场景的函数中可能存在未知的耗时操作逻辑,此处用循环函数模拟耗时操作
async countAndRecord() {
let temp: number = 0;
for (let index = 0; index < 100000; index++) {
temp += index;
}
// 将结果放入状态变量中
this.sum = temp;
}
build() {
Column() {
TopBar()
List({ space: ListConstants.LIST_SPACE }) {
LazyForEach(momentData, (moment: FriendMoment) => {
ListItem() {
// 子组件的传参通过状态变量进行
OneMoment({
moment: moment,
sum: this.sum
})
}
}, (moment: FriendMoment) => moment.id)
}
.cachedCount(Constants.CACHED_COUNT)
}
}
}
@Reusable
@Component
export struct OneMoment {
@Prop moment: FriendMoment;
@State sum: number = 0;
aboutToReuse(params: Record<string, Object>): void {
this.sum = params.sum as number;
}
build() {
Column() {
...
Text(`${this.moment.userName} (${this.moment.id} / ${this.sum})`)
...
}
}
}
上述正例的操作中,通过耗时函数countAndRecord生成的结果不变,可以将其放到页面初始渲染时执行一次,将结果赋值给this.sum。在复用组件的参数传递时,通过this.sum来进行。避免使用函数/方法作为复用组件创建时的入参,可以减少重复执行入参中的函数所带来的性能消耗。
看完三件事❤️
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注作者 ,不定期分享原创知识。
- 同时可以期待后续文章ing🚀。