OpenHarmony組件復(fù)用示例
OpenHarmony組件復(fù)用示例
- 摘要：在開發(fā)應(yīng)用時，有些場景下的自定義組件具有相同的組件布局結(jié)構(gòu)，僅有狀態(tài)變量等承載數(shù)據(jù)的差異。這樣的組件緩存起來，需要使用到該組件時直接復(fù)用，
減少了創(chuàng)建和渲染的時間，可以提高幀率和用戶性能體驗。本文會介紹開發(fā)OpenHarmony應(yīng)用時如何使用組件復(fù)用能力。 - 關(guān)鍵字：OpenHarmony HarmonyOS 鴻蒙 ForEach LazyForEach 循環(huán)渲染
概述
在開發(fā)應(yīng)用時，有些場景下的自定義組件具有相同的組件布局結(jié)構(gòu)，僅有狀態(tài)變量等承載數(shù)據(jù)的差異。這樣的組件緩存起來，需要使用到該組件時直接復(fù)用，
減少重復(fù)創(chuàng)建和渲染的時間，從而提高應(yīng)用頁面的加載速度和響應(yīng)速度。
在OpenHarmony應(yīng)用開發(fā)時，自定義組件被@Reusable裝飾器修飾時表示該自定義組件可以復(fù)用。在父自定義組件下創(chuàng)建的可復(fù)用組件從組件樹上移除后，會被加入父自定義組件的可復(fù)用節(jié)點緩存里。
在父自定義組件再次創(chuàng)建可復(fù)用組件時，會通過更新可復(fù)用組件的方式，從緩存快速創(chuàng)建可復(fù)用組件。這就是OpenHarmony的組件復(fù)用機制。
本文會介紹開發(fā)OpenHarmony應(yīng)用時如何使用組件復(fù)用能力。
環(huán)境準(zhǔn)備
準(zhǔn)備一個DevEco Studio，使用真機或者Simulator模擬器來驗證。更多關(guān)于DevEco Studio的信息，請訪問：https://developer.harmonyos.com/cn/develop/deveco-studio/。
組件復(fù)用接口
OpenHarmony SDK文件ets\component\common.d.ts的自定義組件的生命周期里定義了aboutToReuse方法，如下：
自定義組件的生命周期回調(diào)函數(shù)用于通知用戶該自定義組件的生命周期，這些回調(diào)函數(shù)是私有的，在運行時由開發(fā)框架在特定的時間進行調(diào)用，不能從應(yīng)用程序中手動調(diào)用這些回調(diào)函數(shù)。
當(dāng)一個可復(fù)用的自定義組件從復(fù)用緩存中重新加入到節(jié)點樹時，觸發(fā)aboutToReuse生命周期回調(diào)，并將組件的構(gòu)造參數(shù)傳遞給aboutToReuse。aboutToReuse函數(shù)的參數(shù)是字典類型的，鍵為組件的構(gòu)造參數(shù)變量名稱，值為組件的構(gòu)造參數(shù)實際取值。
該聲明周期函數(shù)從API version 10開始，該接口支持在ArkTS卡片中使用。
declare class CustomComponent extends CommonAttribute {
......
/**
* aboutToReuse Method
*
* @param { { [key: string]: unknown } } params - Custom component init params.
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @crossplatform
* @since 10
*/
aboutToReuse?(params: { [key: string]: unknown }): void;
......
}開發(fā)實踐
我們看下組件復(fù)用的實際使用案例。示例中，會創(chuàng)建一個圖片列表頁面，使用懶加載LazyForEach，以及組件復(fù)用能力。
創(chuàng)建數(shù)據(jù)源
首先，創(chuàng)建了一個業(yè)務(wù)對象類MyImage，包含一個image_id圖片編號和image_path圖片路徑。根據(jù)實際業(yè)務(wù)的不同，會有差異，此例僅用于演示。
然后，創(chuàng)建一個數(shù)據(jù)源類ImageListDataSource，并構(gòu)造一個列表對象imageList。
可以看到，構(gòu)造了10000條記錄。 在工程的/resources/images文件夾下有50張圖片。
每條記錄中，包含一個編號，從0到9999。
記錄中，還一個一個圖片路徑，不同的記錄，編號不會重復(fù)，圖片路徑可能重復(fù)。
至此，數(shù)據(jù)源類創(chuàng)建完畢。
export class MyImage {
image_id: string
image_path: string
constructor(image_id: string, image_path: string) {
this.image_id = image_id
this.image_path = image_path
}
}
export class ImageListDataSource extends BasicDataSource {
private imageList: MyImage[] = []
public constructor() {
super()
for (let i = 0;i < 10000; i++) {
let imageStr = `/resources/images/photo${(i % 50).toString()}.jpg`
this.imageList.push(new MyImage(i.toString(), imageStr))
}
}
public totalCount(): number {
return this.imageList.length
}
public getData(index: number): MyImage {
return this.imageList[index]
}
......
}創(chuàng)建復(fù)用組件
創(chuàng)建好數(shù)據(jù)源類后，我們再看下可復(fù)用組件的代碼。
使用裝飾器@Reusable來標(biāo)記一個組件是否屬于可復(fù)用組件。
我們創(chuàng)建的可復(fù)用組件有一個狀態(tài)變量@State item，構(gòu)造該自定義組件時，父組件會給子母件傳遞構(gòu)造數(shù)據(jù)。
還需要實現(xiàn)組件復(fù)用聲明周期回調(diào)函數(shù)aboutToReuse，在這個函數(shù)里，通過params把構(gòu)造數(shù)據(jù)傳遞給可復(fù)用組件。
我們在函數(shù)aboutToReus里，再單獨加個一個打印函數(shù)，用于在組件復(fù)用時，輸出一條日志記錄。
需要注意的是，正常情況下，aboutToReuse函數(shù)里除了構(gòu)造參數(shù)傳值，不要做任何耗時操作。
在可復(fù)用組件的build()方法里，為每條記錄渲染一行，包含圖片、圖片編號和圖片路徑。
圖片編號可以識別渲染的是哪一條數(shù)據(jù)，用于驗證組件復(fù)用了正確的組件。
@Reusable
@Component
struct MyListItem {
@State item: MyImage = new MyImage('', '')
aboutToReuse(params) {
this.item = params.item
Logger.info(TAG, 'aboutToReuse-,item=' + this.item.toString())
}
build() {
Row({ space: 10 }) {
Image(this.item.image_path)
.width(50)
.height(50)
.borderRadius(5)
.autoResize(false)
.syncLoad(true)
Blank()
Text(this.item.image_id)
.fontColor(Color.Black)
.fontSize(15)
Blank()
Text(this.item.image_path)
.fontColor(Color.Black)
.fontSize(15)
}
}
}入口組件
在我們的@Ent*/-·- 件里，在List父組件里，可以調(diào)用可復(fù)用組件MyListItem。
通過{ item: item }完成父子組件參數(shù)傳遞。
reuseId參數(shù)是可選的，用于標(biāo)記可復(fù)用組件的復(fù)用類型。屬性參數(shù)的注釋如下：
/**
* Reuse id is used for identify the reuse type for each custom node.
*
* @param { string } id - The id for reusable custom node.
* @syscap SystemCapability.ArkUI.ArkUI.Full
* @crossplatform
* @since 10
*/
reuseId(id: string)入口組件的示例代碼如下：
@Entry
@Component
struct Index {
private data: ImageListDataSource = new ImageListDataSource()
build() {
List({ space: 3 }) {
LazyForEach(this.data, (item: MyImage) => {
ListItem() {
MyListItem({ item: item })
// .reuseId(item.image_id)
}
}, item => item)
}
}
}注意事項
可以訪問站點https://gitee.com/openharmony/developtools_ace_ets2bundle/tree/master/compiler/test/utForPartialUpdate/render_decorator/@recycle查看組件復(fù)用的一些示例，這些是用于測試的例子。@Reusable之前的裝飾器的名稱為@Recycle，舊名稱不使用了。
ForEach渲染控制具有全展開的特性，不能觸發(fā)組件復(fù)用。
總結(jié)
本文介紹了開發(fā)OpenHarmony應(yīng)用時如何使用組件復(fù)用能力，提供代碼示例，期望幫助關(guān)注組件復(fù)用的開發(fā)者朋友們。
