刷新过程中，ForEach 键值生成函数未设置导致的闪屏问题
问题现象
下拉刷新时，应用产生卡顿，出现闪屏问题。
1.@Builder2.private getListView() {3. List({4. space: 12, scroller: this.scroller5. }) {6. // 使用懒加载组件渲染数据7. ForEach(this.newsData, (item: NewsData) => {8. ListItem() {9. newsItem({10. newsTitle: item.newsTitle,11. newsContent: item.newsContent,12. newsTime: item.newsTime,13. img: item.img14. })15. }16. .backgroundColor(Color.White)17. .borderRadius(16)18. });19. }20. .width('100%')21. .height('100%')22. .padding({23. left: 16,24. right: 1625. })26. .backgroundColor('#F1F3F5')27. // 必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。28. .edgeEffect(EdgeEffect.None)29.}
复制代码
可能原因
ForEach 提供了一个名为 keyGenerator 的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义 keyGenerator 函数，则 ArkUI 框架会使用默认的键值生成函数，即(item: Object, index: number) => { return index + '__' + JSON.stringify(item); }。可参考键值生成规则。
在使用 ForEach 的过程中，若对于键值生成规则的理解不够充分，可能会出现错误的使用方式。错误使用一方面会导致功能层面问题，例如渲染结果非预期，另一方面会导致性能层面问题，例如渲染性能降低。
解决措施
在 ForEach 第三个参数中定义自定义键值的生成规则，即(item: NewsData, index?: number) => item.id，这样可以在渲染时降低重复组件的渲染开销，从而消除闪屏问题。可参考ForEach组件使用建议。
1.@Builder2.private getListView() {3. List({4. space: 12, scroller: this.scroller5. }) {6. // 使用懒加载组件渲染数据7. ForEach(this.newsData, (item: NewsData) => {8. ListItem() {9. newsItem({10. newsTitle: item.newsTitle,11. newsContent: item.newsContent,12. newsTime: item.newsTime,13. img: item.img14. })15. }16. .backgroundColor(Color.White)17. .borderRadius(16)18. }, (item: NewsData) => item.newsId);19. }20. .width('100%')21. .height('100%')22. .padding({23. left: 16,24. right: 1625. })26. .backgroundColor('#F1F3F5')27. // 必须设置列表为滑动到边缘无效果，否则无法触发pullToRefresh组件的上滑下拉方法。28. .edgeEffect(EdgeEffect.None)29.}
复制代码
运行效果如下图所示。
总结
当出现应用闪屏相关问题时，首先定位可能出现的原因，分别测试是否为当前原因导致。定位到问题后尝试使用对应解决方案，从而消除对应问题现象。
· 应用连续点击场景下，通过计数器优化动画逻辑。
· Tabs 页签切换场景下，完善动画细粒度，提高流畅表现。
· ForEach 刷新内容过程中，根据业务场景调整键值生成函数。
本文主要引用参考 HarmonyOS 官方文档
评论