列表配置优化

术语定义

• VirtualizedList: FlatList背后的基础支撑组件（是 React Native 对虚拟列表 Virtual List概念的实现）。

• 内存开销 Memory consumption: 列表在内存中存放多少数据。开销过大可能导致应用崩溃。

• 响应度 Responsiveness: 应用对于用户操作的响应速度。比如低响应度就是你在操作时，应用要卡一会儿才响应。

• 空白区 Blank areas: 当VirtualizedList渲染的速度跟不上你滑动的速度时，你可能会在列表中看到一些尚未完成渲染的空白占位元素。

• 视口 Viewport: 已渲染内容的可视区域。

• 滑动窗口 Window: 内容组件应该被挂载的区域，通常比视口（viewport）大得多。

Props

下面列出了一些可以提升FlatList性能的重要技巧:

removeClippedSubviews

类型	默认值
Boolean	False

如果设为 true，那些超出视口范围的视图会从原生视图层级结构中分离。

好处： 启用此选项可减少花在主线程上的时间，从而降低丢帧的风险。原理是对视口之外的视图不进行本地渲染和绘图遍历。

坏处： 请注意，这种实现可能会有 bug，比如丢失内容（主要是在 iOS 上观察到的），特别是当你使用变换和/或绝对定位做复杂的事情时。另外，请注意这并不会节省大量的内存，因为视图并没有被销毁，只是被分离了。

maxToRenderPerBatch

类型	默认值
Number	10

这是一个可以通过 FlatList 传递的 VirtualizedList 属性。它控制每批渲染的元素数量,也就是每次滚动时渲染的下一组元素。

好处： 设置较大的数值意味着在滚动时会减少视觉上的空白区域(提高填充率)。

坏处： 每批处理更多元素意味着更长的 JavaScript 执行时间,可能会阻塞其他事件处理,例如按键操作,从而影响响应速度。

updateCellsBatchingPeriod

类型	默认值
Number	50

maxToRenderPerBatch 告诉 VirtualizedList 每批次渲染的元素数量，而 updateCellsBatchingPeriod 则用于设置两次批量渲染之间的延迟毫秒数（也就是组件渲染可见区域内元素的频率）。

好处： 将这个属性与 maxToRenderPerBatch 结合使用，你就可以灵活控制渲染的节奏，比如在频率较低时渲染更多元素，或者在频率较高时渲染较少元素。

坏处： 频率过低可能会导致出现空白区域，而频率过高则可能影响组件的响应速度。

initialNumToRender

类型	Default
Number	10

初始渲染的元素数量。

好处： 为每个设备定义精确的（刚好可以）覆盖屏幕的项目数量。这可以大大提升初始渲染的性能。

坏处： 如果设置的 initialNumToRender 值过低，尤其是小到不足以覆盖初始渲染时的可视区域，就可能会出现空白区域。

windowSize

类型	默认值
Number	21

这里传递的数字是一个度量单位，其中 1 相当于视口高度。默认值为 21（上方 10 个视口，下方 10 个视口，中间一个视口）。

好处： windowSize 值越大，滚动时看到空白区域的概率就越小。另一方面，windowSize 值越小，同时加载的元素就越少，从而节省内存。

坏处： 对于较大的 windowSize，内存消耗会更多。对于较小的 windowSize，看到空白区域的概率会更大。

列表组件的优化要点

接下来是展示列表项组件的一些小技巧。列表项组件是列表的核心，所以它们的性能要足够好。

使用简单组件

组件越复杂一般渲染就越慢。 在列表项中尽量避免过多的逻辑和嵌套。如果你在应用中经常复用这个列表项组件，那就专门为这些大型列表创建一个组件，尽可能减少其中的逻辑和嵌套。

使用轻量组件

组件太重自然也会拖慢渲染。尽量避免使用大图片（优先使用裁剪过的版本或是缩略图，总之越小越好）。和负责设计的同事协商，在列表中尽可能简化特效和交互，精简要展示的信息，把长内容移到详情页中。

使用memo()

React.memo() 会创建一个带有记忆化功能的组件，只有当传递给组件的 props 发生变化时，该组件才会重新渲染。我们可以利用这个函数来优化 FlatList 中的组件。

import React, {memo} from 'react';
import {View, Text} from 'react-native';

const MyListItem = memo(
  ({title}: {title: string}) => (
    <View>
      <Text>{title}</Text>
    </View>
  ),
  (prevProps, nextProps) => {
    return prevProps.title === nextProps.title;
  },
);

export default MyListItem;

在这个例子中，我们决定只有在标题发生变化时才重新渲染MyListItem组件。我们将比较函数作为第二个参数传递给React.memo()，以便只在指定的属性发生变化时才重新渲染组件。如果比较函数返回true，则组件将不会被重新渲染。

使用优化缓存的图片库

你可以使用社区的扩展包（例如 @DylanVann 提供的 react-native-fast-image ）来获得更高性能的图片加载体验。列表中的每张图片都是一个new Image()实例。它触发 loaded 钩子的速度越快，你的 Javascript 线程就能越快再次空闲下来。

使用 getItemLayout

如果您的列表项组件都具有相同的高度（或宽度，对于水平列表），则提供 getItemLayout属性可以消除您的 FlatList 管理异步布局计算的需要。这是一种非常理想的优化技术。

如果您的组件具有动态大小并且确实需要性能，请考虑询问设计团队是否可以重新设计以获得更好的性能。

使用 keyExtractor 或 key

你可以为 FlatList 组件设置 keyExtractor 属性。这个属性用于缓存,同时作为 React 的 key 来跟踪列表项的重新排序。 你也可以在列表项组件中使用 key 属性。

避免在 renderItem 中使用匿名函数

对于函数式组件，把 renderItem 函数移到返回的 JSX 之外。另外，确保把它包裹在 useCallback 钩子里，防止每次渲染时都重新创建。 对于类组件，把 renderItem 函数移到 render 函数之外，这样每次调用render函数时它就不会重新创建自己了。

const renderItem = useCallback(({item}) => (
   <View key={item.key}>
      <Text>{item.title}</Text>
   </View>
 ), []);

return (
  // ...

  <FlatList data={items} renderItem={renderItem} />;
  // ...
);