赣州网站推广,自己的服务器如何做网站,哈尔滨展览设计公司,大连开发区招聘信息最新招聘鸿蒙应用开发启航计划-CSDN博客
鸿蒙应用开发#xff08;1#xff09;-CSDN博客 没看过前两篇的#xff0c;建议请先看上面。 如果你学习完了前两篇#xff0c;那么你学习这篇文章#xff0c;就很容易理解了。 这一篇文章将介绍声明式UI的 渲染控制。你需要了解的是…鸿蒙应用开发启航计划-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 ArrayObject 必填 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组件。
如果觉得文章有帮到你或者有一些收获点赞、收藏和评论一下吧。
