鸿蒙应用开发(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组件。

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

相关推荐
芙莉莲教你写代码43 分钟前
Flutter 框架跨平台鸿蒙开发 - 魔术教学
flutter·华为·harmonyos
纯爱掌门人1 小时前
鸿蒙文件预览开发实践:从打开文件到加速感知
华为·harmonyos
云和数据.ChenGuang2 小时前
当智能体遇上原生鸿蒙:开启下一代操作系统的“智慧觉醒”
华为·harmonyos
左手厨刀右手茼蒿3 小时前
Flutter 三方库 bs58 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、高效的 Base58 数字货币与区块链数据编解码引擎
flutter·harmonyos·鸿蒙·openharmony
加农炮手Jinx3 小时前
Flutter 组件 substrate_bip39 的适配 鸿蒙Harmony 实战 - 驾驭区块链级助记词原语、实现鸿蒙端金融级 BIP39 安全私钥推导方案
flutter·harmonyos·鸿蒙·openharmony·substrate_bip39
左手厨刀右手茼蒿3 小时前
Flutter 组件 substrate_bip39 的适配 鸿蒙Harmony 实战 - 驾驭区块链级 BIP39 安全底座、实现鸿蒙端私钥派生与国密级密钥保护方案
flutter·harmonyos·鸿蒙·openharmony·substrate_bip39
加农炮手Jinx3 小时前
Flutter 三方库 fast_base58 的鸿蒙化进阶指南 - 挑战编解码吞吐量极限、助力鸿蒙端大规模区块链与分布式存储数据处理
flutter·harmonyos·鸿蒙·openharmony·fast_base58
里欧跑得慢3 小时前
Flutter 三方库 ethereum 鸿蒙分布式区块链数字资产上链钱包适配突破:接通 JSON-RPC 加密管线深入打通智能合约闭环实现高价值数字加密交互-适配鸿蒙 HarmonyOS ohos
分布式·flutter·harmonyos
2501_920627613 小时前
Flutter 框架跨平台鸿蒙开发 - 压力管理助手应用
flutter·华为·harmonyos
不爱吃糖的程序媛4 小时前
鸿蒙PC tiny-AES-c三方库适配实践
c语言·华为·harmonyos