HarmonyOS 实战开发 —— 基于RN框架实现高性能瀑布流页面

---

📚往期笔录记录🔖：

🔖鸿蒙（HarmonyOS）北向开发知识点记录~
🔖鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
🔖鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
🔖嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
🔖对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
🔖鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
🔖记录一场鸿蒙开发岗位面试经历~
🔖持续更新中……

---

一、简介

本文针对应用开发中相当常见的瀑布流页面场景，基于按需渲染、组件复用等技术，使用RN框架实现了高性能瀑布流页面。本文提供详细的开发步骤，帮助开发人员高效实现高性能瀑布流页面。

1.1 基本概念

瀑布流：瀑布流布局在应用开发中非常常见。它利用容器的布局规则，将元素项目从上到下排列，形成多列参差不齐、不断加载的效果，使内容像瀑布般倾泻而下。由于其特点，瀑布流常用于展示图片资讯、购物商品和直播视频等多种数据形式。在上下滑动时，由于具备无限加载的特性，瀑布流可以展示大量内容，然而大小不一的子元素会增加测量和绘制的性能消耗。

RN：React Native（RN）是一个跨平台移动应用的开源框架，具有高性能和丰富组件库。许多主流应用使用RN开发瀑布流页面，如携程、华为商城等，这些应用利用RN的灵活性和高效性能，实现了图片和视频等内容的不规则布局展示。

1.2 典型场景

相较于传统的格子式布局，瀑布流页面看起来更加紧凑和丰满。逐块填充的方式，让布局比较灵活、动态，因而能够提升信息的密集度和丰富度。通过内容的巧妙编排，瀑布流布局可以让视觉焦点自觉且持续下移，促使用户自然而然低滚动查看更多内容，这种布局形式现在广泛应用于社交媒体、电商、影音娱乐等APP。

开发瀑布流页面时，通常会面临数据量不固定、页面卡片高度不一、页面操作阻塞UI绘制线程、卡片布局复杂冗余、状态管理不合理等问题。

数据量不固定的问题通常采用批量请求数据的方式从服务器中获取数据的方式来解决。如果每批请求的数据量少了，则会增加服务器负担，如果每批请求的数据量多了，一次性加载渲染这些数据，应用侧又会花费大量的时间来处理这些数据，导致加载缓慢甚至加载不出来的情况。而按需渲染则不会出现这种问题，因为使用按需渲染技术时，应用加载渲染数据只会加载屏幕显示区域和缓冲区的组件数，这就大大减少了需要加载渲染的组件数量，提高应用性能，提升用户体验。

瀑布流页面上的卡片一般都是结构相同的几种卡片，如果能固定每种卡片的高度，则理论上卡片布局时就不需要额外的计算卡片在瀑布流上的位置，从而减少计算时间提升性能。另外如果每次卡片组件下树就完全销毁组件，上树时又重新创建则会浪费这些卡片相同结构的设计，而使用组件复用技术就能解决这个问题。使用组件复用时，组件下树时会保留组件的结构放到缓存池里，组件上树时从缓存池里拿到对应组件的结构，然后就只需要根据状态渲染就行了，从而减少了创建组件结构的时间。

卡片布局复杂冗余需要开发者仔细检查代码中卡片的布局情况，按下述文档调整，一般而言布局的最大嵌套层级控制在5-8层左右即可。

二、关键技术

为了实现一个高性能的瀑布流页面，尤其是在承载大量数据和复杂布局的场景下，需要采用一些关键技术来优化性能。以下是一些优化瀑布流布局的关键技术。

技术名称	适用场景	技术要点
按需渲染	数据量大、页面需要流畅滚动的场景	仅渲染可视区域内的项目，使用虚拟化技术减少内存占用，提升性能。
组件复用	应用中存在大量结构相同的组件频繁创建与销毁的场景而造成性能瓶颈问题的场景。	为不同类型的组件创建所对应的组件复用池。
布局优化	错误的布局方式可能会导致组件树和嵌套层数过多，在创建和布局绘制阶段产生较大的性能开销，所以可以通过布局优化提升性能。	1. 移除冗余的节点。 2. 使用扁平化布局减少节点数。 3. 利用布局边界减少布局计算。
固定宽高比	适用于所有瀑布流页面开发，因瀑布流中每一个列表项的高度未知，瀑布流组件在布局阶段会参与整体的测算，会带来一定的性能消耗。	根据已知的宽度计算出列表项的高度，通过固定宽高比，可以在 UI 绘制时直接指定组件的宽高属性。
使用FastImage	包含大量图片需要优化加载的场景	使用 FastImage 替代 Image 组件，提升图片加载和显示性能，支持缓存和并行加载。

2.1 按需渲染

问题场景

普通滚动容器ScrollView会从列表数据源一次性加载并渲染全量数据，当数据量较大时首次渲染时间长，并且会占用大量内存，成为性能瓶颈。

优化手段

按需渲染的技术解决了一次性加载并渲染全量数据的问题，在首次渲染时，只会渲染首屏内容和用户即将看到的内容，减少了页面首次启动时一次性加载数据的时间消耗，减少了内存峰值，所以它的首次渲染速度很快。在滚动渲染时，只会按需渲染屏幕内的和屏幕附近像素的内容，在保证性能的同时，又有一部分数据作为缓冲，不至于一滑动就看到白块。