当前位置：首页 > news >正文

鸿蒙应用开发（2）

news 来源：原创 2025/5/14 15:46:14

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

鸿蒙应用开发（1）-CSDN博客

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

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

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

条件渲染

if/else：条件渲染

循坏渲染

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

整体结构我自己理解可以理解为如此结构：“数据源，组件，键值？”

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

// arr是string类型的数组
// 第一个参数是组件创建函数
// 第二个参数是键值生成函数
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组件。

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

相关文章：