OpenHarmony应用组件复用学习原创

zhushangyuan_

发布于 2023-8-30 21:20

浏览

0收藏

本文，先记录学习下懒加载LazyForEach的组件复用特性。因水平有限，如有失误，请随时指教。

组件复用

有些场景下的自定义组件具有相同的组件布局结构，仅有状态变量等承载数据的差异。把这样的组件缓存起来，需要使用到该组件时直接复用，减少重复创建和渲染的时间，从而提高应用页面的加载速度和响应速度。对于LazyForEach懒加载，如果列表项组件设置为复用，组件移除时，会放入父组件的可复用组件缓存；当需要创建渲染可复用组件时，可以更新可复用组件，实现快速创建渲染。

<img title=“” src=“performance/list_lazy_for_each_reuse.png” alt=“Alt text” data-align=“center” width=“800”>
在OpenHarmony应用开发时，自定义组件被@Reusable装饰器修饰时表示该自定义组件可以复用。在父自定义组件下创建的可复用组件从组件树上移除后，会被加入父自定义组件的可复用节点缓存里。在父自定义组件再次创建可复用组件时，会通过更新可复用组件的方式，从缓存快速创建可复用组件。

使用装饰器@Reusable标记一个组件属于可复用组件后，还需要实现组件复用声明周期回调函数aboutToReuse，其参数为可复用组件的状态变量。调用可复用自定义组件时，父组件会给子组件传递构造数据。

示例代码如下所示：

@Reusable
@Component
struct ReusableChatView {
  @State chatItem: ChatModel = undefined

  aboutToReuse(params) {
    this.chatItem = params.chatItem
  }

  build() {
    ChatView({ chatItem: this.chatItem })
  }
}

在实际场景中，我们应该如何用好组件复用这个特性呢？在列表项的布局复杂度更高时，组件复用的效果更好。因为更高复杂度的组件布局，初始化时需要消耗更多的系统资源，因此在使用较高复杂的列表布局时，建议使用组件复用这个特性。

组件复用不够智能，是否使用组件复用完整交给了开发者。期望后续可以优化完善。