背景

统计发现有 60% 的商家有使用我司手机端 APP 的习惯，为方便这一部分商家在 APP 上报名参与营销活动，在手机端也实现与现有 PC 端相似的 My Campaign 功能。

其中“可报名活动”页面，展示的活动列表条数有可能会多达几百上千条，在实现功能之前有必要考虑性能问题。

布局选择

在 web 端开发，如果我们页面的内容在垂直方向上超出了页面的尺寸，滚动条会出现；与 web 端不同，手机端(RN)并不会出现滚动条，超出页面的内容会直接被截断。

要在 RN 端显示超过一屏的内容，就要选择合适的「容器」: ScrollView / SectionList / FlatList 。

ScrollView 会将全部内容一次性渲染出来，适用于不太多的内容；

SectionList 与 FlatList 就像 web 端的无限滚动，只会渲染部分内容，用于展示大量的列表内容，

SectionList适用于分组的列表数据，如联系人列表，FlatList 适用于更通用的场合。

性能测量

影响 RN 性能的问题会体现在两个线程上面： JS 线程和原生应用的主线程（UI 线程）。当你打开 RN 的 developer menu ，选择 Show Perf Monitor 就会显示这两个线程对帧率的影响：

Show Perf MonitorShow Perf Monitor Show Perf Monitor ThreadsShow Perf Monitor Threads

可以看到页面静止时，上图无论 UI 还是 JS 的帧率最高都是 60 。

JS 线程对帧率的影响与 web 端的 React 应用类似，定位这方面的问题也与 web 端类似：在 developer menu 中选择 Debug JS Remotely ，在新打开的浏览器中打开开发者控制台，利用 Performance 标签中的功能定位问题。

而 UI 线程一般受图片形变、动画影响，通常不会是性能的瓶颈，出问题也很容易定位。

在测量性能之前，首先要确保你的 RN 应用运行在 production mode 。RN 应用运行在 development mode 时，因为要加入对开发友好的错误提示和类型检查，对 JS 线程的性能影响很大。

FlatList 性能

首先关注几个对性能有影响的属性：

  • getItemLayout ，可以通过这个属性返回元素高度、宽度。与 web 端的无限滚动类似，如果列表中每个元素的高度都是固定的， FlatList 就可以省去动态计算要渲染的元素高度的步骤（非常耗费性能）；
  • initialNumToRender，这个值表示初次需要渲染多少个列表元素，默认值是 10 。但是 10 通常太大，官方建议设置成填满首屏的数量即可，并且初次渲染的这些元素并不会被卸载。因此设置一个比 10 小的数字会提升性能；
  • maxToRenderPerBatch，这个值表示每次触发渲染新列表元素时一次性渲染多少个列表元素，默认值是 10 。这个值设置得太小，滚动得快时就容易出现空白页面;设置得太大，内存消耗会变大，响应速度也会变慢；
  • updateCellsBatchingPeriod，这个值设置渲染新列表元素的延迟时间，默认值是 50 （毫秒）。如果设置得太大，滚动时就容易出现空白，设置得太小性能亦会下降；
  • 更多属性请参考这里。

与业务结合的优化实践

可以通过下面的动画了解需求:

总结一下：

  • 页面有一个头部信息展示区域
  • 当滚动到一定位置时，页面会显示/更新置顶元素
  • 列表元素的高度不固定、且用户可以折叠、展开列表元素
  • 右下角有一个「一键返回顶部」的按钮
  • 页面有两个 tab ，其中第二个 tab 中可以勾选列表元素

react_native_flatlist_sec_1react native flatlist section 1 react_native_flatlist_sec_2react native flatlist section 2 react_native_flatlist_sec_3react native flatlist section 3

我们打开 Show Perf Monitor 看一下性能(in production mode & in iPhone SE(2nd) simulator)：

可以看到帧率很稳定，很少低于 60 。（肉眼能看到的卡顿是 simulator 的问题，在真机上不会有这个问题）

简单列举一下所做的性能优化:

  1. 当需要使用 FlatList 渲染列表，但是页面包含除了列表之外的页头、页脚时，就可以用 FlatList 的 ListHeaderComponent/ListFooterComponent 属性渲染这些内容；
  2. 就算列表元素的高度并不固定，也可以设置 getItemLayout 属性，替 FlatList 计算出渲染元素的高度，实现方式是用一个 map 记录下各个元素渲染时的高宽，避免重复计算；
  3. 当用户点击 展开/折叠 按钮，列表元素会展开、折叠，继而触发 onLayout 事件，在这个事件回调中更新上面的 map ；
  4. 可以看到，通常只要两个列表元素就能将首屏填满，因此将 initialNumToRender 属性值设置为 3；
  5. 为了避免单个元素 展开/折叠 会触发整个 FlatList 重新渲染，在单个元素中用 hooks 管理自身的 展开/折叠 状态，触发渲染；
  6. 虽然 FlatList 有设置置顶元素的属性 stickyHeaderIndices ，但是这个属性固定整个列表元素，而我们的需求只是固定列表的某部分；所以实现方式是设置单独的绝对定位元素、与 FlatList 元素并列位于某个容器下面；
  7. 为避免频繁触发 FlatList 重新渲染，除了 data 属性之外，所有传入的 FlatList 的属性值都是简单值或者是方法、对象的引用；
  8. 为了实现勾选元素时重新渲染列表（不然复选框不会显示选中），使用 extraData 属性值触发重新渲染；
  9. 列表元素以及其子孙元素使用 React.memo 包裹，避免不必要的渲染；
  10. 一些状态值，如果不涉及重新渲染，则不保存在 State 中，而是保存在组件的 private 属性中；
  11. 一些保存在 State 中的状态值（如是否显示「一键返回顶部」按钮），如果计算得出没有发生改变，就不调用 setState 。

参考：