怎么向google提交网站,做响应式网站最大宽度,广州各类外贸网站,网站外链优化前言
在列表组件使用的时候#xff0c;如List、Grid、WaterFlow等#xff0c;循环渲染时都会使用到ForEach或者LazyForEach#xff0c;当然了#xff0c;也有单独使用的场景#xff0c;如下#xff0c;一个很简单的列表组件使用#xff0c;这种使用方式#xff0c;在官…前言
在列表组件使用的时候如List、Grid、WaterFlow等循环渲染时都会使用到ForEach或者LazyForEach当然了也有单独使用的场景如下一个很简单的列表组件使用这种使用方式在官方的很多案例中也多次出现相信在实际的开发中多多少少也会存在。 List({ space: 20, initialIndex: 0 }) {ForEach([条目1, 条目2, 条目3, 条目4, 条目5, 条目6], (item: string) {ListItem() {Text(item).width(100%).height(50).fontSize(16).fontColor(Color.White).textAlign(TextAlign.Center).backgroundColor(Color.Orange)}}, (item: string) item)}.padding({ left: 20, right: 20 }) 以上的代码看上去也没啥问题UI也能正常的展示出来如下图 仿佛这一切都是正确的但是以上的代码会存在一定的问题那就是渲染非预期我们继续验证问题所在增加一个按钮用来添加数据当然了这里需要把数据源提取至成员变量并用State装饰器进行修饰 State list: string[] [条目1, 条目2, 条目3, 条目4, 条目5, 条目6]build() {Column() {Button(追加数据).onClick(() {this.list.push(条目七)this.list.push(条目八)})List({ space: 20, initialIndex: 0 }) {ForEach(this.list, (item: string) {ListItem() {Text(item).width(100%).height(50).fontSize(16).fontColor(Color.White).textAlign(TextAlign.Center).backgroundColor(Color.Orange)}}, (item: string) item)}.padding({ left: 20, right: 20 }).margin({ top: 20 })}} 当我们点击追加数据按钮时正常的情况会是数组中增加数据驱动UI更新List组件应该会增加【条目七条目八】两条数据。 确实点击后UI发生了变化列表中增加了两条数据 有问题吗说了一大堆程序这不执行挺正常的哎稍安勿躁我们再次点击一下正常的程序会再次增加两条数据对吧
但是问题来了没有增加点击一百次也没有增加。
难道是重复的数据不能重复添加这就很扯了吧列表中不能出现重复的数据这在任何一个系统中都是闻所未闻的奇观。
显然这些问题都不是问题的原因就在于循环的第三个参数keyGenerator。 本文的主要内容如下 1、了解循环ForEach/LazyForEach三个参数
2、了解键值生成规则
3、禁止渲染非预期情况
4、正确使用键值
5、使用相关总结 一、了解循环ForEach/LazyForEach三个参数
ForEach (arr: Arrayany, itemGenerator: (item: any, index: number) void, keyGenerator?: (item: any, index: number) string): ForEachAttribute;
LazyForEach (dataSource: IDataSource, itemGenerator: (item: any, index: number) void, keyGenerator?: (item: any, index: number) string): LazyForEachAttribute; 第一个参数arr/dataSource是数据源用来渲染UI的数据非常重要渲染多少数据动态增加数据都是和它有着直接的关系可以是任何类型的数组源比如对象字符串数值都可以。
第二个参数itemGenerator是组件生成函数目的为数组中的每个元素创建对应的组件它是和第一个数据源是一一对应的。
第三个参数keyGenerator是键值生成函数为数据源arr的每个数组项生成唯一且持久的键值其返回值可以自己定义如果自己定义一定要是唯一的如果不定义会是默认的(item: T, index: number) { return index __ JSON.stringify(item); }默认的也能满足大部分的需求所以在实际的开发中如果你很难决定唯一那么直接用默认的就行。在前言中的问题就是因为键值不唯一造成的。
二、了解键值生成规则 通过了解循环的三个参数我们已经知道了系统会为我们提供设置键值的函数参数可以使用自定义的当然也可以使用默认的键值生成规则也就是item: Object, index: number) { return index __ JSON.stringify(item); }。
在实际的渲染过程中每个数组元素生成一个唯一且持久的键值用来标记相对应的组件当键值有变化时ArkUI框架会认为当前数组元素替换或修改会根据新的键值重新创建一个新的组件。
键值的生成规则直接会影响着数据渲染的UI因为第二个参数itemGenerator函数会根据键值生成规则为数据源的每个数组项创建组件。
在前言的Demo中可以发现每个组件的键值为当前的数据源当不同数组项按照键值生成规则生成的键值相同时框架认为是未定义的此时不再创建新的组件也就是点击不会再次创建组件的原因。
当然了还有一种情况那就是在已有的数据上进行修改比如有三条数据把第三条数据修改为新的数据源这种情况前两个数据ForEach会复用进行渲染第三个则会为该数组项创建了一个新的组件。
三、禁止渲染非预期情况
什么叫渲染非预期前言中的Demo就是一个典型的案例存在相同键值因此不会创建新组件在实际的开发中使用ForEach时应尽量避免最终键值生成规则中包含index或者使用不唯一的规则作为键值。
四、正确使用键值
首先必须满足键值的唯一性这一点毋庸置疑必须要设置正确如果使用的是对象强烈建议使用对象中的唯一值比如id作为键值。 如果是使用基本类型的数据作为键值一定要确保数组中的元素是没有重复的否则就会出现前言Demo中的问题另外在使用基本类型键值ForEach在改变数据源后会重新创建组件这会带来一定的性能损耗问题。 根据官方的解读在使用ForEach的时候尽量不要与LazyForEach混合使用这是官方所不推荐的切记
五、使用相关总结
为了使得数据渲染正确请一定要确保第三个参数键值的唯一性另外除非必要不推荐将第三个参数KeyGenerator函数处于缺省状态以及在键值生成规则中包含数据项索引index。
