HarmonyOS NEXT实战开发：使用懒加载开发长列表界面实现案列

于 2024-09-19 16:54:03 发布
阅读量837 收藏 9
点赞数 17
分类专栏： HarmonyOS NEXT 文章标签： harmonyos 华为 驱动开发 华为od android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87288236/article/details/142364506
版权

往期鸿蒙全套实战精彩文章必看内容：

针对List、Grid、WaterFlow、Swiper组件，提供NodeAdapter对象替代ArkTS侧的LazyForEach功能，用于按需生成子组件，其中List组件的属性枚举值为NODE_LIST_NODE_ADAPTER，Grid组件的属性枚举值为NODE_GRID_NODE_ADAPTER，WaterFlow组件的属性枚举值为NODE_WATER_FLOW_NODE_ADAPTER，Swiper组件的属性枚举值为NODE_SWIPER_NODE_ADAPTER。

虽然都用于按需生成组件，但不同于ArkTS的LazyForEach，NodeAdapter对象的规格如下：

  • 设置了NodeAdapter属性的节点，不再支持addChild等直接添加子组件的接口。子组件完全由NodeAdapter管理，使用属性方法设置NodeAdapter时，会判断父组件是否已经存在子节点，如果父组件已经存在子节点，则设置NodeAdapter操作失败，返回错误码。

  • NodeApdater通过相关事件通知开发者按需生成组件，类似组件事件机制，开发者使用NodeAdapter时要注册事件监听器，在监听器事件中处理逻辑，相关事件通过ArkUI_NodeAdapterEventType定义。另外NodeAdapter不会主动释放不在屏幕内显示的组件对象，开发者需要在NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER事件中进行组件对象的释放，或者进行缓存复用。下图展示了典型列表滑动场景下的事件触发机制：

以下示例代码针对接入ArkTS页面章节代码进行优化，引入懒加载机制实现文本列表：

  1. 接入ArkTS。

  2. 懒加载适配器相关功能实现。

    // ArkUIListItemAdapter
// 用于文本列表懒加载功能代码。

#ifndef MYAPPLICATION_ARKUILISTITEMADAPTER_H
#define MYAPPLICATION_ARKUILISTITEMADAPTER_H

#include <arkui/native_node.h>
#include <stack>
#include <string>
#include <unordered_set>

#include "ArkUIListItemNode.h"
#include "ArkUITextNode.h"
#include "nativeModule.h"

namespace NativeModule {

class ArkUIListItemAdapter {
public:
    ArkUIListItemAdapter()
        : module_(NativeModuleInstance::GetInstance()->GetNativeNodeAPI()), handle_(OH_ArkUI_NodeAdapter_Create()) { // 使用NodeAdapter创建函数。
        // 初始化懒加载数据。
        for (int32_t i = 0; i < 1000; i++) {
            data_.emplace_back(std::to_string(i));
        }
        // 设置懒加载数据。
        OH_ArkUI_NodeAdapter_SetTotalNodeCount(handle_, data_.size());
        // 设置懒加载回调事件。
        OH_ArkUI_NodeAdapter_RegisterEventReceiver(handle_, this, OnStaticAdapterEvent);
    }

    ~ArkUIListItemAdapter() {
        // 释放创建的组件。
        while (!cachedItems_.empty()) {
            cachedItems_.pop();
        }
        items_.clear();
        // 释放Adapter相关资源。
        OH_ArkUI_NodeAdapter_UnregisterEventReceiver(handle_);
        OH_ArkUI_NodeAdapter_Dispose(handle_);
    }

    ArkUI_NodeAdapterHandle GetHandle() const { return handle_; }

    void RemoveItem(int32_t index) {
        // 删除第index个数据。
        data_.erase(data_.begin() + index);
        // 如果index会导致可视区域元素发生可见性变化，则会回调NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER事件删除元素，
        // 根据是否有新增元素回调NODE_ADAPTER_EVENT_ON_GET_NODE_ID和NODE_ADAPTER_EVENT_ON_ADD_NODE_TO_ADAPTER事件。
        OH_ArkUI_NodeAdapter_RemoveItem(handle_, index, 1);
        // 更新新的数量。
        OH_ArkUI_NodeAdapter_SetTotalNodeCount(handle_, data_.size());
    }

    void InsertItem(int32_t index, const std::string &value) {
        data_.insert(data_.begin() + index, value);
        // 如果index会导致可视区域元素发生可见性变化，则会回调NODE_ADAPTER_EVENT_ON_GET_NODE_ID和NODE_ADAPTER_EVENT_ON_ADD_NODE_TO_ADAPTER事件，
        // 根据是否有删除元素回调NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER事件。
        OH_ArkUI_NodeAdapter_InsertItem(handle_, index, 1);
        // 更新新的数量。
        OH_ArkUI_NodeAdapter_SetTotalNodeCount(handle_, data_.size());
    }

    void MoveItem(int32_t oldIndex, int32_t newIndex) {
        auto temp = data_[oldIndex];
        data_.insert(data_.begin() + newIndex, temp);
        data_.erase(data_.begin() + oldIndex);
        // 移到位置如果未发生可视区域内元素的可见性变化，则不回调事件，反之根据新增和删除场景回调对应的事件。
        OH_ArkUI_NodeAdapter_MoveItem(handle_, oldIndex, newIndex);
    }

    void ReloadItem(int32_t index, const std::string &value) {
        data_[index] = value;
        // 如果index位于可视区域内，先回调NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER删除老元素，
        // 再回调NODE_ADAPTER_EVENT_ON_GET_NODE_ID和NODE_ADAPTER_EVENT_ON_ADD_NODE_TO_ADAPTER事件。
        OH_ArkUI_NodeAdapter_ReloadItem(handle_, index, 1);
    }

    void ReloadAllItem() {
        std::reverse(data_.begin(), data_.end());
        // 全部重新加载场景下，会回调NODE_ADAPTER_EVENT_ON_GET_NODE_ID接口获取新的组件ID，
        // 根据新的组件ID进行对比，ID不发生变化的进行复用，
        // 针对新增ID的元素，调用NODE_ADAPTER_EVENT_ON_ADD_NODE_TO_ADAPTER事件创建新的组件，
        // 然后判断老数据中遗留的未使用ID，调用NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER删除老元素。
        OH_ArkUI_NodeAdapter_ReloadAllItems(handle_);
    }

private:
    static void OnStaticAdapterEvent(ArkUI_NodeAdapterEvent *event) {
        // 获取实例对象，回调实例事件。
        auto itemAdapter = reinterpret_cast<ArkUIListItemAdapter *>(OH_ArkUI_NodeAdapterEvent_GetUserData(event));
        itemAdapter->OnAdapterEvent(event);
    }

    void OnAdapterEvent(ArkUI_NodeAdapterEvent *event) {
        auto type = OH_ArkUI_NodeAdapterEvent_GetType(event);
        switch (type) {
        case NODE_ADAPTER_EVENT_ON_GET_NODE_ID:
            OnNewItemIdCreated(event);
            break;
        case NODE_ADAPTER_EVENT_ON_ADD_NODE_TO_ADAPTER:
            OnNewItemAttached(event);
            break;
        case NODE_ADAPTER_EVENT_ON_REMOVE_NODE_FROM_ADAPTER:
            OnItemDetached(event);
            break;
        default:
            break;
        }
    }

    // 分配ID给需要显示的Item，用于ReloadAllItems场景的元素diff。
    void OnNewItemIdCreated(ArkUI_NodeAdapterEvent *event) {
        auto index = OH_ArkUI_NodeAdapterEvent_GetItemIndex(event);
        static std::hash<std::string> hashId = std::hash<std::string>();
        auto id = hashId(data_[index]);
        OH_ArkUI_NodeAdapterEvent_SetNodeId(event, id);
    }

    // 需要新的Item显示在可见区域。
    void OnNewItemAttached(ArkUI_NodeAdapterEvent *event) {
        auto index = OH_ArkUI_NodeAdapterEvent_GetItemIndex(event);
        ArkUI_NodeHandle handle = nullptr;
        if (!cachedItems_.empty()) {
            // 使用并更新回收复用的缓存。
            auto recycledItem = cachedItems_.top();
            auto textItem = std::dynamic_pointer_cast<ArkUITextNode>(recycledItem->GetChildren().back());
            textItem->SetTextContent(data_[index]);
            handle = recycledItem->GetHandle();
            // 释放缓存池的引用。
            cachedItems_.pop();
        } else {
            // 创建新的元素。
            auto listItem = std::make_shared<ArkUIListItemNode>();
            auto textNode = std::make_shared<ArkUITextNode>();
            textNode->SetTextContent(data_[index]);
            textNode->SetFontSize(16);
            textNode->SetPercentWidth(1);
            textNode->SetHeight(100);
            textNode->SetBackgroundColor(0xFFfffacd);
            textNode->SetTextAlign(ARKUI_TEXT_ALIGNMENT_CENTER);
            listItem->AddChild(textNode);
            listItem->RegisterOnClick([index]() { OH_LOG_INFO(LOG_APP, "on %{public}d list item click", index); });
            handle = listItem->GetHandle();
            // 保持文本列表项的引用。
            items_.emplace(handle, listItem);
        }
        // 设置需要展示的元素。
        OH_ArkUI_NodeAdapterEvent_SetItem(event, handle);
    }

    // Item从可见区域移除。
    void OnItemDetached(ArkUI_NodeAdapterEvent *event) {
        auto item = OH_ArkUI_NodeAdapterEvent_GetRemovedNode(event);
        // 放置到缓存池中进行回收复用。
        cachedItems_.emplace(items_[item]);
    }



    std::vector<std::string> data_;
    ArkUI_NativeNodeAPI_1 *module_ = nullptr;
    ArkUI_NodeAdapterHandle handle_ = nullptr;

    // 管理NodeAdapter生成的元素。
    std::unordered_map<ArkUI_NodeHandle, std::shared_ptr<ArkUIListItemNode>> items_;

    // 管理回收复用组件池。
    std::stack<std::shared_ptr<ArkUIListItemNode>> cachedItems_;
};

} // namespace NativeModule

#endif // MYAPPLICATION_ARKUILISTITEMADAPTER_H

  3. 针对接入ArkTS页面章节使用的列表封装类对象，添加额外懒加载能力。

    // ArkUIListNode.h
// 列表封装对象。

#ifndef MYAPPLICATION_ARKUILISTNODE_H
#define MYAPPLICATION_ARKUILISTNODE_H

#include "ArkUIListItemAdapter.h"
#include "ArkUINode.h"
#include <hilog/log.h>

namespace NativeModule {
class ArkUIListNode : public ArkUINode {
public:
    ArkUIListNode()
        : ArkUINode((NativeModuleInstance::GetInstance()->GetNativeNodeAPI())->createNode(ARKUI_NODE_LIST)) {}

    ~ArkUIListNode() override {
        nativeModule_->unregisterNodeEvent(handle_, NODE_LIST_ON_SCROLL_INDEX);
        if (adapter_) {
            // 析构的时候卸载adapter下的UI组件。
            nativeModule_->resetAttribute(handle_, NODE_LIST_NODE_ADAPTER);
            adapter_.reset();
        }
    }

    void SetScrollBarState(bool isShow) {
        assert(handle_);
        ArkUI_ScrollBarDisplayMode displayMode =
            isShow ? ARKUI_SCROLL_BAR_DISPLAY_MODE_ON : ARKUI_SCROLL_BAR_DISPLAY_MODE_OFF;
        ArkUI_NumberValue value[] = {{.i32 = displayMode}};
        ArkUI_AttributeItem item = {value, 1};
        nativeModule_->setAttribute(handle_, NODE_SCROLL_BAR_DISPLAY_MODE, &item);
    }

    void RegisterOnScrollIndex(const std::function<void(int32_t index)> &onScrollIndex) {
        assert(handle_);
        onScrollIndex_ = onScrollIndex;
        nativeModule_->registerNodeEvent(handle_, NODE_LIST_ON_SCROLL_INDEX, 0, nullptr);
    }
    // 引入懒加载模块。
    void SetLazyAdapter(const std::shared_ptr<ArkUIListItemAdapter> &adapter) {
        assert(handle_);
        ArkUI_AttributeItem item{nullptr, 0, nullptr, adapter->GetHandle()};
        nativeModule_->setAttribute(handle_, NODE_LIST_NODE_ADAPTER, &item);
        adapter_ = adapter;
    }

protected:
    void OnNodeEvent(ArkUI_NodeEvent *event) override {
        auto eventType = OH_ArkUI_NodeEvent_GetEventType(event);
        switch (eventType) {
        case NODE_LIST_ON_SCROLL_INDEX: {
            auto index = OH_ArkUI_NodeEvent_GetNodeComponentEvent(event)->data[0];
            if (onScrollIndex_) {
                onScrollIndex_(index.i32);
            }
        }
        default: {
        }
        }
    }

private:
    std::function<void(int32_t index)> onScrollIndex_;

    std::shared_ptr<ArkUIListItemAdapter> adapter_;
};
} // namespace NativeModule

#endif // MYAPPLICATION_ARKUILISTNODE_H

  4. 创建列表懒加载的示例代码。

    // ArkUILazyTextListExample
// 懒加载列表示例代码。

#ifndef MYAPPLICATION_LAZYTEXTLISTEXAMPLE_H
#define MYAPPLICATION_LAZYTEXTLISTEXAMPLE_H

#include "ArkUIBaseNode.h"
#include "ArkUIListNode.h"
#include "UITimer.h"
#include <thread>
#include <uv.h>

namespace NativeModule {

std::shared_ptr<ArkUIBaseNode> CreateLazyTextListExample(napi_env env) {
    // 创建组件并挂载
    // 1：创建List组件。
    auto list = std::make_shared<ArkUIListNode>();
    list->SetPercentWidth(1);
    list->SetPercentHeight(1);
    // 2：创建ListItem懒加载组件并挂载到List上。
    auto adapter = std::make_shared<ArkUIListItemAdapter>();
    list->SetLazyAdapter(adapter);

    // 3：模拟相关懒加载操作。
    CreateNativeTimer(env, adapter.get(), 4, [](void *userdata, int32_t count) {
        auto adapter = reinterpret_cast<ArkUIListItemAdapter *>(userdata);
        switch (count) {
        case 0: {
            // 删除第0个元素。
            adapter->RemoveItem(0);
            break;
        }
        case 1: {
            // 插入第0个元素。
            adapter->InsertItem(0, "0");
            break;
        }
        case 2: {
            // 移到元素位置。
            adapter->MoveItem(0, 2);
            break;
        }
        case 3: {
            // 重载元素。
            adapter->ReloadItem(0, "1112");
            break;
        }
        case 4: {
            // 全量重载。
            adapter->ReloadAllItem();
            break;
        }
        default: {
        }
        }
    });

    // 3：注册List相关监听事件.
    list->RegisterOnScrollIndex([](int32_t index) { OH_LOG_INFO(LOG_APP, "on list scroll index: %{public}d", index); });
    // 4: 注册挂载事件。
    list->RegisterOnAppear([]() { OH_LOG_INFO(LOG_APP, "on list mount to tree"); });
    // 4: 注册卸载事件。
    list->RegisterOnDisappear([]() { OH_LOG_INFO(LOG_APP, "on list unmount from tree"); });
    return list;
}
} // namespace NativeModule

#endif // MYAPPLICATION_LAZYTEXTLISTEXAMPLE_H

  5. 定时器模块相关简单实现。

    
// UITimer.h
// 定时器模块。

#ifndef MYAPPLICATION_UITIMER_H
#define MYAPPLICATION_UITIMER_H

#include <hilog/log.h>
#include <js_native_api.h>
#include <js_native_api_types.h>
#include <node_api.h>
#include <node_api_types.h>
#include <string>
#include <thread>
#include <uv.h>

namespace NativeModule {

struct UIData {
void *userData = nullptr;
int32_t count = 0;
int32_t totalCount = 0;
void (*func)(void *userData, int32_t count) = nullptr;
};

napi_threadsafe_function threadSafeFunction = nullptr;

void CreateNativeTimer(napi_env env, void *userData, int32_t totalCount, void (*func)(void *userData, int32_t count)) {
napi_value name;
std::string str = "UICallback";
napi_create_string_utf8(env, str.c_str(), str.size(), &name);
// UI主线程回调函数。
napi_create_threadsafe_function(
env, nullptr, nullptr, name, 0, 1, nullptr, nullptr, nullptr,
[](napi_env env, napi_value value, void *context, void *data) {
auto userdata = reinterpret_cast<UIData *>(data);
userdata->func(userdata->userData, userdata->count);
delete userdata;
},
&threadSafeFunction);
// 启动定时器，模拟数据变化。
std::thread timerThread([data = userData, totalCount, func]() {
uv_loop_t *loop = uv_loop_new();
uv_timer_t *timer = new uv_timer_t();
uv_timer_init(loop, timer);
timer->data = new UIData{data, 0, totalCount, func};
uv_timer_start(
timer,
[](uv_timer_t *handle) {
OH_LOG_INFO(LOG_APP, "on timeout");
napi_acquire_threadsafe_function(threadSafeFunction);
auto *customData = reinterpret_cast<UIData *>(handle->data);
// 创建回调数据。
auto *callbackData =
new UIData{customData->userData, customData->count, customData->totalCount, customData->func};
napi_call_threadsafe_function(threadSafeFunction, callbackData, napi_tsfn_blocking);
customData->count++;
if (customData->count > customData->totalCount) {
uv_timer_stop(handle);
delete handle;
delete customData;
}
},
4000, 4000);
uv_run(loop, UV_RUN_DEFAULT);
uv_loop_delete(loop);
});
timerThread.detach();
}
} // namespace NativeModule

#endif // MYAPPLICATION_UITIMER_H

  6. 按照接入ArkTS页面章节将懒加载相关示例代码挂载到ContentSlot上显示。

    
// NDK接口入口挂载文件。

#include "NativeEntry.h"

#include "ArkUIMixedRefresh.h"
#include "LazyTextListExample.h"
#include "MixedRefreshExample.h"
#include "TextListExample.h"

#include <arkui/native_node_napi.h>
#include <arkui/native_type.h>
#include <js_native_api.h>
#include <uv.h>

namespace NativeModule {
namespace {
napi_env g_env;
}

napi_env GetNapiEnv() { return g_env; }

napi_value CreateNativeRoot(napi_env env, napi_callback_info info) {
size_t argc = 1;
napi_value args[1] = {nullptr};

napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

// 获取NodeContent
ArkUI_NodeContentHandle contentHandle;
OH_ArkUI_GetNodeContentFromNapiValue(env, args[0], &contentHandle);
NativeEntry::GetInstance()->SetContentHandle(contentHandle);

// 创建懒加载文本列表
auto node = CreateLazyTextListExample(env);

// 保持Native侧对象到管理类中，维护生命周期。
NativeEntry::GetInstance()->SetRootNode(node);
g_env = env;
return nullptr;
}

napi_value DestroyNativeRoot(napi_env env, napi_callback_info info) {
// 从管理类中释放Native侧对象。
NativeEntry::GetInstance()->DisposeRootNode();
return nullptr;
}

} // namespace NativeModule

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者 ，不定期分享原创知识。
  • 同时可以期待后续文章ing🚀。   

小魔法Tony
关注
专栏目录
HarmonyOS NEXT应用开发性能指导
09-04
HarmonyOS NEXT应用开发性能指导。应用开发案例集
鸿蒙开发渲染控制【LazyForEach：数据懒加载】
2401_82772199的博客
07-31 383
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
（五）鸿蒙HarmonyOS主力开发语言ArkTS-数据懒加载(LazyForEach)
qq_44160056的博客
04-01 2099
系列文章目录 （一）鸿蒙HarmonyOS开发基础 （二）鸿蒙HarmonyOS主力开发语言ArkTS-基本语法 （三）鸿蒙HarmonyOS主力开发语言ArkTS-状态管理 （四）鸿蒙HarmonyOS主力开发语言ArkTS-渲染控制 文章目录系列文章目录LazyForEach：数据懒加载接口描述IDataSource类型说明DataChangeListener类型说明使用限制键值生成规则组件创建规则首次渲染 LazyForEach：数据懒加载 LazyForEach从提供的数据源中按需迭代数据，并在
鸿蒙开发笔记(二十八): 性能提升常用方法
Waruler的博客
01-24 964
性能提升常用方法
OpenHarmony实战开发-Grid高性能开发指导。
2401_82546228的博客
04-22 1142
在构建大型、复杂应用时，性能优化至关重要。Grid布局作为一种高效布局方式，可以提高页面的均分能力、子组件占比控制能力及自适应布局能力。本文将介绍Grid在高性能开发方面的应用，包括懒加载、cachedCount、组件复用和使用GridLayoutOptions设置GridItem大小等方法，帮助开发者优化Grid布局性能，减少加载和渲染时间，提升用户体验。
HarmonyOS-LazyForEach：数据懒加载
2301_81624474的博客
01-24 1849
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
《全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战》是一套针对初学者精心设计的鸿蒙操作系统开发教程。本教程旨在帮助没有编程基础的学员快速掌握HarmonyOS的开发技能，通过丰富的实例和清晰的讲解，...
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
06-29
黑马程序员HarmonyOS4+NEXT星河版入门到企业级实战教程，一套精通鸿蒙应用开发41-50
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
鸿蒙next标签栏无法自动更新，解决懒加载问题
m0_56315670的博客
03-06 661
在开发鸿蒙时，我们会遇到这样一个局面，在@Entry组件修饰下的根组件跳转至其他@Component修饰的组件时只能在组件初始的时候加载一次，其余情况默认原先的加载状况以至于用户无法实时获取正确的信息。4.解决方案：将生命周期作为函数，实例化该对象并且再次加载生命周期。
HarmonyOS Next开发学习手册——使用NDK接口构建UI(使用懒加载开发长列表界面)
maniuT的博客
07-08 773
针对List、Grid、WaterFlow、Swiper组件，提供 NodeAdapter 对象替代ArkTS侧的LazyForEach功能，用于按需生成子组件，其中List组件的属性枚举值为NODE_LIST_NODE_ADAPTER，Grid组件的属性枚举值为NODE_GRID_NODE_ADAPTER，WaterFlow组件的属性枚举值为NODE_WATER_FLOW_NODE_ADAPTER，Swiper组件的属性枚举值为NODE_SWIPER_NODE_ADAPTER。
鸿蒙开发之LazyForEach及刷新问题
Lu_Ca的博客
02-20 2827
在开发过程中会遇到list、grid的item过多的情况。例如某些新闻类、某些购物类的页面，如果我们有大量的数据，直接通过ForEach进行全量渲染会直接把手机卡死。这样肯定是不行的，这个时候LazyForEach就该登场了。LazyForEach主要是用来针对列表数据量大、列表组件复杂的场景，减少了页面一次性加载数据的时间消耗，减少了内存峰值。可以显著提升页面的能效比和用户体验。实现原理就是它会从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
【鸿蒙实战开发】列表加载ForEach和LazyForEach
HarmonyOS007的博客
07-30 1407
HarmonyOS应用框架提供了组件复用能力，可复用组件从组件树上移除时，会进入到一个回收缓存区。后续创建新组件节点时，会复用缓存区中的节点，节约组件重新创建的时间。尤其在列表等场景下，其自定义子组件具有相同的组件布局结构，列表更新时仅有状态变量等数据差异。通过组件复用可以提高列表页面的加载速度和响应速度。标记为@Reusable的组件从组件树上被移除时，组件和其对应的JSView对象都会被放入复用缓存中。
鸿蒙Harmony应用开发—ArkTS-LazyForEach：数据懒加载
m0_64420071的博客
03-23 1965
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
OpenHarmony实战开发-运行时动态加载页面提升性能。
2401_82546228的博客
04-23 1095
应用在加载页面时，如果引入大量暂不需要加载的模块，会因过多模块导致页面加载缓慢。比如当页面在使用Navigation组件时，主页默认先加载所有页面，此时若包含大量子页面，仅加载主页这一项就需要很长时间，但这些复杂的子页面与主页渲染无关。 本文推荐使用动态加载解决上述问题，不在应用程序加载时就将所有模块都加载进来，而是按需加载模块，增加应用灵活性，提升应用性能。
[鸿蒙] --- 使用LazyForEach懒加载数据列表
qq_45774739的博客
06-03 1726
LazyForEach从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach，框架会根据滚动容器可视区域按需创建组件，当组件滑出可视区域外时，框架会进行组件销毁回收以降低内存占用。简而言之，其实它和前端的虚拟列表基本一样，只渲染可见区域的数据，来提升页面的响应速度，减少卡顿。
HarmonyOS 延迟加载（lazy import）
最新发布
程序员—DaLi Sexy
09-05 199
HarmonyOS 延迟加载（lazy import）
浅谈App响应时间优化
xuexiangjys的博客
04-21 417
还是那句话，百闻不如一见，百见不如一试。写了这么多，我还是希望大家在平时开发的过程中，多重视一些应用响应时间优化的相关技巧，让我们开发出流畅顺滑的应用吧。（尽管很多时候，我们所谓的优化会被产品或者设计diss）我是xuexiangjys，一枚热爱学习，爱好编程，勤于思考，致力于Android架构研究以及开源项目经验分享的技术up主。【我的Android开源之旅】
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值