鸿蒙应用开发(2)

鸿蒙应用开发启航计划-CSDN博客

鸿蒙应用开发(1)-CSDN博客

没看过前两篇的,建议请先看上面。

如果你学习完了前两篇,那么你学习这篇文章,就很容易理解了。

这一篇文章将介绍声明式UI的 **渲染控制。**你需要了解的是,它们渲染的是UI组件。从这个角度,去理解会很简单。

条件渲染

if/else:条件渲染

循坏渲染

ForEach:循环渲染 ,这块知识是围绕3个参数展开的:

整体结构我自己理解可以理解为如此结构:"数据源,组件,键值?"

developer.huawei.com网站的示例如下:

  1. // arr是string类型的数组
  2. // 第一个参数是组件创建函数
  3. // 第二个参数是键值生成函数
  4. ForEach(this.arr, (item: string, index: number) => {Text(item)}, (item: string, index: number) => item + index)

数组类型数据(可简单理解为数据源)第一个参数

arr Array<Object> 必填

keyGenerator 第三个参数

keyGenerator (item: Object, index: number) => string 选填

第三个参数缺省时,默认键值生成规则:(item: Object, index: number) => { return index + '__' + JSON.stringify(item); },你可以把这个过程简单理解为密码加密的过程,然后最终生成了标识密码给每个元素打标记。

首先,你要清楚的不是这个语法的意义,而是为什么需要这个键值,其实就是为了给元素打标记,就是为了复用。如果元素没有变化,键值不变,则不会创建,终极目标是花最低的性能成本去渲染UI组件。

itemGenerator 第二个参数

itemGenerator (item: Object, index: number) => void 必填

组件创建规则(首次渲染和非首次渲染)

首次渲染 --- 创建和渲染

非首次渲染 --- 键值不存在,直接创建;键值存在,直接渲染。

从上面你也应该知道了,构建UI除了传统的系统组件外,还可以借助渲染控制语句辅助UI的创建。

ForEach在开发过程中使用场景,如果是列表场景,分为:

列表数据源不变,列表数据源变化,列表数据源子属性变化(这个说起来有点抽象举个例子,你就可以了解了,比如你发的朋友圈,有人点赞,评论。item整体没有大的变化,只是细微处的子项目有变化。)

需要感悟的地方:细心的读者可能发现了,我上面介绍是ForEach的3个参数,我的介绍顺序是132,而不是123的顺序介绍。这个介绍方式是有意为之的,ForEach的工作顺序,就是132。就是准备了1,然后根据3去生成2,根据2去让组件创建和渲染。

最后,如果数据源数量非常大,建议使用LazyForEach组件。

如果觉得文章有帮到你或者有一些收获,点赞、收藏和评论一下吧。

相关推荐
小冷爱学习!8 小时前
华为动态路由-OSPF-完全末梢区域
服务器·网络·华为
2501_904447748 小时前
华为发力中端,上半年nova14下半年nova15,大力普及原生鸿蒙
华为·智能手机·django·scikit-learn·pygame
MarkHD9 小时前
第十八天 WebView深度优化指南
华为·harmonyos
塞尔维亚大汉10 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【MIPI CSI】
harmonyos·领域驱动设计
别说我什么都不会10 小时前
鸿蒙轻内核M核源码分析系列十五 CPU使用率CPUP
操作系统·harmonyos
feiniao865111 小时前
2025年华为手机解锁BL的方法
华为·智能手机
塞尔维亚大汉12 小时前
OpenHarmony(鸿蒙南向)——平台驱动开发【I3C】
harmonyos·领域驱动设计
VVVVWeiYee12 小时前
BGP配置华为——路径优选验证
运维·网络·华为·信息与通信
今阳14 小时前
鸿蒙开发笔记-6-装饰器之@Require装饰器,@Reusable装饰器
android·app·harmonyos
余多多_zZ14 小时前
鸿蒙初学者学习手册(HarmonyOSNext_API14)_组件截图(@ohos.arkui.componentSnapshot (组件截图) )
学习·华为·harmonyos·鸿蒙·鸿蒙系统