HarmonyOS--控制渲染

概述

ArkUI通过自定义组件的build()函数和@Builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句，针对大数据量场景的数据懒加载语句，针对混合模式开发的组件渲染语句。

if else条件渲染

概述

原理是当if分支状态没有变化，就会正常创建组件没有变化

如果If分支有变化，则会删除所有父组件下的子组件并重新构造。比如在Column下面的有if语句判断，如果状态发生变化，则会将Column下面所有子组件删除再按新分支重新加载

使用

就正常使用，注意一点就是如果使用父子组件，注意状态变量

Foreach 循环渲染

概述

主要是键值生成规则，其他正常，还有渲染规则

LzayForeach懒加载

初识懒加载

就是屏幕显示多少就会加载多少，屏幕以外的不会加载，预加载属性可以增加在出现白块的情况下

最小配置如下，相对于Foreach，它的数据源是个数组，而懒加载的数据源是IDataSource，你必须创建一个数据源，数据源里应该包括你想要渲染的数据，以及继承IDataSource这个接口。

class MyDataSource implements IDataSource{  
  private dataArray: string[] = [];  
  
  public totalCount(): number {  
      return this.dataArray.length;  
    }  
  
    public pushData(text:string){  
    this.dataArray.push(text)  
    }  
  
  public getData(index: number): string {  
        return this.dataArray[index];  
      }  
  
      public registerDataChangeListener(listener: DataChangeListener): void {   }  
      public  unregisterDataChangeListener(listener: DataChangeListener): void {  }
}  
  
@Entry  
@Component  
struct MyComponent {  
  private data:MyDataSource=new MyDataSource()  
  
  aboutToAppear() {  
    for (let i = 0; i <= 200; i++) {  
      this.data.pushData(`Hello ${i}`)  
    }  
  }  
  build() {  
    List({ space: 30 }) {  
      LazyForEach(this.data, (item: string) => {  
        ListItem() {  
          Row() {  
            Text(item).fontSize(50)  
              .onAppear(() => {  
                console.info("appear:" + item)  
              })  
          }.margin({ left: 10, right: 10 })  
        }  
      }, (item: string) => item)  
    }.cachedCount(5)  
  }  
}

以上就是最最精简没有任何特殊功能的懒加载（甚至是部分最基础功能缺失），但是它以及可以实现懒加载的效果了。

想要删除懒加载列表时，要使用this.data.dataArray.indexof(item)获取该点击项目的实时索引值，如果直接使用index则会发生混乱。

大概往下看了几眼，每次更改数据源的时候都要去实现监听器那边的API，这样才可以进行实时渲染的效果。有交换数据，更改单个数据等

可以实现一个无限瀑布流

foreach，第二个参数才可以有拖拽效果

常见使用问题

渲染结果非预期

这种情况大多是键值对匹配错误，比如说删除一项之后导致这次键值和上次键值不匹配，删除产生混乱导致。

解决方法是使用indexof来重新遍历需要删除数组的index，或者重新刷新数组生成新的键值对规则。

图片闪烁问题

如果循环渲染的项目是一个文字加图片的组合，改变文字会导致图片的频闪，这是因为lazyforeach的api监测到该项的文字改变，会使得整个数组重新加载，然后图片的加载是异步的，会导致频闪，这时候就应该使用@Observe单独刷新文字不刷新图片

列表频闪问题

使用reload导致频闪可以改为
this.notifyDataReload()
this.notifyDatasetChange([{type:DataOperationType.ADD,index:totalCount-1,count:batch}])