Este artículo es una reproducción de " #2023BlindBox+Code# OpenHarmony Component Reuse Ejemplo ", autor zhushangyuan_
- Resumen: Al desarrollar aplicaciones, los componentes personalizados en algunos escenarios tienen la misma estructura de diseño de componentes, con solo diferencias en las variables de estado y otros datos que transportan. Dichos componentes se almacenan en caché y se reutilizan directamente cuando es necesario utilizar el componente.
- El tiempo reducido de creación y renderizado puede mejorar la velocidad de fotogramas y la experiencia de rendimiento del usuario. Este artículo presentará cómo utilizar la reutilización de componentes al desarrollar aplicaciones OpenHarmony. Palabras clave: OpenHarmony HarmonyOS HarmonyOS ForEach LazyForEach Representación en bucle
descripción general
Al desarrollar una aplicación, los componentes personalizados en algunos escenarios tienen la misma estructura de diseño de componentes, con solo diferencias en datos como las variables de estado. Dichos componentes se almacenan en caché y se reutilizan directamente cuando es necesario utilizar el componente.
Reduzca el tiempo dedicado a la creación y renderización repetidas, mejorando así la velocidad de carga y la capacidad de respuesta de las páginas de la aplicación. Durante el desarrollo de la aplicación OpenHarmony, cuando un componente personalizado se adorna con el decorador @Reusable, significa que el componente personalizado se puede reutilizar. Una vez que el componente reutilizable creado bajo el componente personalizado principal se elimine del árbol de componentes, se agregará a la caché de nodo reutilizable del componente personalizado principal.
Cuando el componente personalizado principal vuelva a crear el componente reutilizable, creará rápidamente el componente reutilizable desde la memoria caché actualizando el componente reutilizable. Este es el mecanismo de reutilización de componentes de OpenHarmony. Este artículo presentará cómo utilizar la reutilización de componentes al desarrollar aplicaciones OpenHarmony.
Preparación ambiental
Prepare un DevEco Studio y utilice un dispositivo real o un simulador para verificar. Para obtener más información sobre DevEco Studio, visite: Descarga y actualización de HUAWEI DevEco Studio y SDK | HarmonyOS Developer .
Interfaz de reutilización de componentes
El método aboutToReuse se define en el ciclo de vida del componente personalizado en el archivo ets\component\common.d.ts del SDK de OpenHarmony, de la siguiente manera:
La función de devolución de llamada del ciclo de vida de un componente personalizado se utiliza para notificar al usuario sobre el ciclo de vida del componente personalizado. Estas funciones de devolución de llamada son privadas y el marco de desarrollo las llama en un momento específico durante el tiempo de ejecución. Estas funciones de devolución de llamada no se pueden llamar manualmente desde la aplicación.
Cuando se agrega un componente personalizado reutilizable al árbol de nodos desde la caché de reutilización, se activa la devolución de llamada del ciclo de vida aboutToReuse y los parámetros de construcción del componente se pasan a aboutToReuse. El parámetro de la función aboutToReuse es un tipo de diccionario, la clave es el nombre de la variable del parámetro de construcción del componente y el valor es el valor real del parámetro de construcción del componente.
La función del ciclo de declaración comienza desde la versión 10 de API y esta interfaz admite el uso en tarjetas 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;
......
}
práctica de desarrollo
Veamos un caso de uso práctico de reutilización de componentes. En el ejemplo, se creará una página de lista de imágenes utilizando la carga diferida LazyForEach y la reutilización de componentes.
Crear una fuente de datos
Primero, se crea una clase de objeto comercial MyImage, que contiene un número de imagen image_id y una ruta de imagen image_path. Dependiendo del negocio real, habrá diferencias. Este ejemplo es solo para demostración.
Luego, cree una clase de fuente de datos ImageListDataSource y construya una lista de objetos de lista imageList.
Como puede ver, se construyen 10.000 registros. Hay 50 imágenes en la carpeta /resources/images del proyecto.
Cada registro contiene un número del 0 al 9999.
En el registro, también hay una ruta de imagen una por una. Para diferentes registros, el número no se repetirá y la ruta de la imagen puede repetirse.
Hasta ahora, se ha creado la clase de fuente de datos.
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]
}
......
}
Crear componentes reutilizables
Después de crear la clase de fuente de datos, veamos el código del componente reutilizable.
Utilice el decorador @Reusable para marcar si un componente es un componente reutilizable.
El componente reutilizable que creamos tiene un elemento @State de variable de estado. Al construir el componente personalizado, el componente principal pasará datos de construcción al hijo y al padre.
También es necesario implementar la función de devolución de llamada del ciclo de declaración de reutilización del componente aboutToReuse, en la que los datos de construcción se pasan al componente reutilizable a través de parámetros.
En la función aboutToReus, agregamos una función de impresión separada para generar un registro cuando se reutiliza el componente.
Cabe señalar que, en circunstancias normales, en la función aboutToReuse, no realice ninguna operación que requiera mucho tiempo, excepto la construcción de parámetros para pasar valores.
En el método build() del componente reutilizable, represente una línea para cada registro, incluida la imagen, el número de imagen y la ruta de la imagen.
El número de imagen puede identificar qué datos se representan y se utiliza para verificar que el componente reutiliza el componente correcto.
@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)
}
}
}
componente de entrada
En nuestro @Ent
*/-·- En el componente, en el componente principal Lista, puede llamar al componente reutilizable MyListItem. Complete el parámetro del componente padre-hijo que pasa por { elemento: elemento } .
El parámetro reuseId es opcional y se utiliza para marcar el tipo de reutilización del componente reutilizable. Las anotaciones para los parámetros de atributos son las siguientes:
/**
* 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)
El código de muestra del componente de entrada es el siguiente:
@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)
}
}
}
Precauciones
Puede visitar el sitio developmenttools_ace_ets2bundle: -- - Gitee.com para ver algunos ejemplos de reutilización de componentes, estos son ejemplos para probar.
El nombre del decorador antes de @Reusable es @Recycle y el nombre anterior ya no se usa. El control de renderizado ForEach tiene la característica de expansión completa y no puede activar la reutilización de componentes.
Resumir
Este artículo presenta cómo utilizar la capacidad de reutilización de componentes al desarrollar aplicaciones OpenHarmony, proporciona ejemplos de código y espera ayudar a los desarrolladores y amigos que estén preocupados por la reutilización de componentes.
Si tiene alguna pregunta, bienvenido a intercambiar y discutir.
Referencias
[1] Aplicación de chat de muestra
[2] Ciclo de vida de componentes personalizados