OpenHarmony組件復用示例
OpenHarmony組件復用示例
- 摘要：在開發應用時，有些場景下的自定義組件具有相同的組件布局結構，僅有狀態變量等承載數據的差異。這樣的組件緩存起來，需要使用到該組件時直接復用，
減少了創建和渲染的時間，可以提高幀率和用戶性能體驗。本文會介紹開發OpenHarmony應用時如何使用組件復用能力。 - 關鍵字：OpenHarmony HarmonyOS 鴻蒙 ForEach LazyForEach 循環渲染
概述
在開發應用時，有些場景下的自定義組件具有相同的組件布局結構，僅有狀態變量等承載數據的差異。這樣的組件緩存起來，需要使用到該組件時直接復用，
減少重復創建和渲染的時間，從而提高應用頁面的加載速度和響應速度。
在OpenHarmony應用開發時，自定義組件被@Reusable裝飾器修飾時表示該自定義組件可以復用。在父自定義組件下創建的可復用組件從組件樹上移除后，會被加入父自定義組件的可復用節點緩存里。
在父自定義組件再次創建可復用組件時，會通過更新可復用組件的方式，從緩存快速創建可復用組件。這就是OpenHarmony的組件復用機制。
本文會介紹開發OpenHarmony應用時如何使用組件復用能力。
環境準備
準備一個DevEco Studio，使用真機或者Simulator模擬器來驗證。更多關于DevEco Studio的信息，請訪問：https://developer.harmonyos.com/cn/develop/deveco-studio/。
組件復用接口
OpenHarmony SDK文件ets\component\common.d.ts的自定義組件的生命周期里定義了aboutToReuse方法，如下：
自定義組件的生命周期回調函數用于通知用戶該自定義組件的生命周期，這些回調函數是私有的，在運行時由開發框架在特定的時間進行調用，不能從應用程序中手動調用這些回調函數。
當一個可復用的自定義組件從復用緩存中重新加入到節點樹時，觸發aboutToReuse生命周期回調，并將組件的構造參數傳遞給aboutToReuse。aboutToReuse函數的參數是字典類型的，鍵為組件的構造參數變量名稱，值為組件的構造參數實際取值。
該聲明周期函數從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;
......
}開發實踐
我們看下組件復用的實際使用案例。示例中，會創建一個圖片列表頁面，使用懶加載LazyForEach，以及組件復用能力。
創建數據源
首先，創建了一個業務對象類MyImage，包含一個image_id圖片編號和image_path圖片路徑。根據實際業務的不同，會有差異，此例僅用于演示。
然后，創建一個數據源類ImageListDataSource，并構造一個列表對象imageList。
可以看到，構造了10000條記錄。 在工程的/resources/images文件夾下有50張圖片。
每條記錄中，包含一個編號，從0到9999。
記錄中，還一個一個圖片路徑，不同的記錄，編號不會重復，圖片路徑可能重復。
至此，數據源類創建完畢。
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]
}
......
}創建復用組件
創建好數據源類后，我們再看下可復用組件的代碼。
使用裝飾器@Reusable來標記一個組件是否屬于可復用組件。
我們創建的可復用組件有一個狀態變量@State item，構造該自定義組件時，父組件會給子母件傳遞構造數據。
還需要實現組件復用聲明周期回調函數aboutToReuse，在這個函數里，通過params把構造數據傳遞給可復用組件。
我們在函數aboutToReus里，再單獨加個一個打印函數，用于在組件復用時，輸出一條日志記錄。
需要注意的是，正常情況下，aboutToReuse函數里除了構造參數傳值，不要做任何耗時操作。
在可復用組件的build()方法里，為每條記錄渲染一行，包含圖片、圖片編號和圖片路徑。
圖片編號可以識別渲染的是哪一條數據，用于驗證組件復用了正確的組件。
@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父組件里，可以調用可復用組件MyListItem。
通過{ item: item }完成父子組件參數傳遞。
reuseId參數是可選的，用于標記可復用組件的復用類型。屬性參數的注釋如下：
/**
* 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查看組件復用的一些示例，這些是用于測試的例子。@Reusable之前的裝飾器的名稱為@Recycle，舊名稱不使用了。
ForEach渲染控制具有全展開的特性，不能觸發組件復用。
總結
本文介紹了開發OpenHarmony應用時如何使用組件復用能力，提供代碼示例，期望幫助關注組件復用的開發者朋友們。
