列表视图在app中是非常常见的，目前React Native比较严重的性能问题集中在FlatList大列表等地方，以下通过js层的优化，甚至原生层的优化封装，使性能媲美原生。

FlatList

React Native 0.43版本推出FlatList替代ListView，FlatList实现继承自VirtualizedList，底层的VirtualizedList提供更高的灵活性，但使用便捷性不如FlatList，如无特殊需求无法满足直接使用FlatList。VirtualizedList实现继承自ScrollView，所以FlatList继承了VirtualizedList和ScrollView全部的props，在查阅相关文档时，如在FlatList中找不到相应的prop或者方法可以使用另外两个组件的。React Native的FlatList与android listview、ios uitableview相似，将屏幕外的视图组件回收，达到高性能的目的。

用法

以下实例代码均使用typescript

基本使用

<FlatList<number>// 数据数组data={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}// keykeyExtractor={(item, index) => index.toString()}// item渲染renderItem={({item: num}) => (<Text>{num}</Text>)}
/>
复制代码

常用props

extraData

有除data以外的数据用在列表中，在此属性中指定，否则界面很可能不会刷新

horizontal

设置为 true 则变为水平布局模式

inverted

翻转滚动方向，多用于聊天列表之类反向展示数据

numColumns

指定一列显示多少个item

常用方法

scrollToEnd

滑动到视图底部

scrollToIndex

滑动到指定位置

scrollToOffset

滑动到指定像素

上拉加载

<FlatList// 上拉回调onEndReached={() => console.log('上拉加载')}// 滑动到最后视图内容比例，设置为0-1，例如0.5则表示滑到最后一个视图一半开始回调onEndReachedThreshold={0.1}
/>
复制代码

下拉刷新

<FlatList// true显示刷新组件refreshing={this.state.refreshing}// 下拉回调onRefresh=(async () => {this.setState({refreshing: true});await 耗时操作this.setState({refreshing: false});});
/>
复制代码

滑动事件

onTouchStart

手指按下开始滑动，调用一次，用于监听交互开始

onTouchMove

手指滑动，调用多次

onTouchEnd

手指松开，调用一次，开始惯性滚动，用于监听交互结束

onMomentumScrollBegin

惯性滚动开始，调用一次，用于监听滑动惯性动画开始

onMomentumScrollEnd

惯性滚动结束，调用一次，用于监听滑动惯性动画结束

onScroll

滑动中，调用多次，用于监听滑动位置

onScrollBeginDrag

开始滑动，调用一次，用于监听滑动开始

onScrollEndDrag

滑动结束，调用一次，用于监听滑动结束

分页

用以开发简单轮播视图，分页滑动查看内容等

// 当前视图索引
private index = 0;
// 必须与this绑定，否则抛出异常
private viewabilityConfig = {viewAreaCoveragePercentThreshold: 100};handleViewableItemsChanged = (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken>}) => {// index为当前可见视图在view的索引this.index = info.changed[0].index!;
}<FlatList// 每次滑动后一个item停留在整个视图pagingEnabled={true}// 可见视图设置，1-100，50表示一半可见时回调，100表示全部可见时回调viewabilityConfig={this.viewabilityConfig}// 可见视图变更回调onViewableItemsChanged={this.handleViewableItemsChanged}// onViewableItemsChanged会多次回调，监听惯性滑动结束判断分页滑动结束，如需要实时判断视图索引显示，则直接使用onViewableItemsChangedonMomentumScrollEnd={() => console.log('滑动至', this.index)}
/>
复制代码

优化

removeClippedSubviews

移除在屏幕外组件，默认为true，对性能有最大的影响，不要修改为false

windowSize

保持视图个数，即在屏幕外也不移除，默认值为11，在高耗性能组件中，可以适当设置小的值，在会快速滑动的视图中，设置大的值如300，避免快速滑动后当前视图还没有渲染出现空白。

getItemLayout

获取高度，如视图高度固定，设置该属性可以大大改善性能，避免了渲染过程中每一次都需要重新计算视图高度。

getItemLayout={(data, index) => ({length: height, offset: height * index, index})}

key

合理设置key提高react对组件的复用，能很大的优化性能，在组件移出屏幕外，被回收后复用。

原生优化

在要求极高的列表视图中，数据达上千甚至上万，在部分情况FlatList已经无法满足，特别是android设备。以下介绍如何直接使用原生android RecyclerView视图来完成高要求的列表视图。

原生视图代码

public class MyFlatListManager extends SimpleViewManager<MyFlatListManager.MyRecyclerView> {// 自定义RecyclerViewpublic static class MyRecyclerView extends RecyclerView {// 数据列表public List<Data> list = new ArrayList<>();// 适配器public MyAdapter myAdapter;// 布局管理器public LinearLayoutManager mLayoutManager;public MyRecyclerView(Context context) {super(context);myAdapter = new MyAdapter(this, list);// 设置为垂直方向mLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.VERTICAL, false);setLayoutManager(mLayoutManager);// 固定高度避免重新测量，提高性能setHasFixedSize(true);// 禁止数据变更时动画，避免闪烁setItemAnimator(null);setAdapter(myAdapter);}@Overridepublic void requestLayout() {super.requestLayout();// react native android根视图requestLayout为空函数，避免加入新视图无法显示或者高度宽度不正确，手动执行测量post(measureAndLayout);}public final Runnable measureAndLayout = new Runnable() {@Overridepublic void run() {measure(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));Log.d(TAG, "measureAndLayout");layout(getLeft(), getTop(), getRight(), getBottom());}};}private static class MyViewHolder extends RecyclerView.ViewHolder {public MyViewHolder(View itemView) {super(itemView);}}private static class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {private List<MyViewHolder> holders;private List<Data> list;private MyRecyclerView recyclerView;public MyAdapter(MyRecyclerView recyclerView, List<VideoInfo> list) {this.list = list;this.holders = new ArrayList<>();this.recyclerView = recyclerView;}// 视图创建@Overridepublic MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.movie_list_row, parent, false);// 手动重新设置高度，match parent      itemView.getLayoutParams().height = parent.getHeight();itemView.getLayoutParams().width = parent.getWidth();return new MyViewHolder(itemView);}@Overridepublic void onBindViewHolder(final MyViewHolder holder, int position) {Data data = list.get(position);
//      Log.i(TAG, "setTag " + position);holder.itemView.setTag(position);// 绑定视图数据}@Overridepublic int getItemCount() {return list.size();}}private static final String TAG = "MyFlatListViewManager";@Overridepublic String getName() {return "MyFlatListViewManager";}@Overrideprotected MyRecyclerView createViewInstance(final ThemedReactContext reactContext) {return new MyRecyclerView(reactContext);}@Nullable@Overridepublic Map<String, Integer> getCommandsMap() {Map<String, Integer> commandsMap = new HashMap<>();commandsMap.put("addData", 1);return commandsMap;}@Overridepublic void receiveCommand(MyRecyclerView root, int commandId, @Nullable ReadableArray args) {MyAdapter myAdapter = (MyAdapter) root.getAdapter();switch (commandId) {case 1:if (args == null) return;Log.i(TAG, "addData size: " + args.size());Integer position = root.list.size();for (int i = 0; i < args.size(); i++) {// 初始化值，getData为从map中获取data的函数，自行根据结构实现Data data = getData(args.getMap(i));Log.i(TAG, "add data " + data);root.list.add(data);}Log.i(TAG, "addDatas old position " + position + " size " + args.size());// 通知变更myAdapter.notifyItemRangeInserted(position, args.size());break;}}
}复制代码

需要注意的有几个地方

• setHasFixedSize 如果视图高度固定，设置固定高度能提高性能
• setItemAnimator 动画可能会导致在加载图片等的时候闪烁
• requestLayout 必须重新手动触发测量视图，在android中这部分机制被react native屏蔽
• onCreateViewHolder 必须手动设定itemView高度和宽度

react反模式

在原生组件和js层进行props传递，如数据量太大，使用props直接传递已经不合适，数据可能已经达到几m甚至更大。react的props模式已经不再适合这样的场景，在web中也是，大量的数据每一次单个数据的变更都全部重新传递，会导致严重的性能问题。在这种情况下，使用组件ref调用函数来一个一个添加或者一个一个移除相关数组这些大的对象，会很好的提升性能。在android的代码中，不再使用prop传递FlatList的data，而是使用add的方法来添加，然后在js层再进行一层的原生组件封装，让使用与其他组件一致。