ReactNative Flatlist性能优化

Question

我构建了一个FlatList，允许用户根据标题上的按钮在行或卡片视图项之间进行选择。所以按钮只是调度一个动作，商店被修改，viewMode改变了（减少了actios和商店）。

嗯，问题在于重新呈现列表时的性能，因为整个列表必须从头开始呈现，可以看到轻微的延迟，并且感觉没有反应。

这是呈现列表的容器的样子：

render() {
  if (this.props.rowMode) {
    return (
      <FlatList
        data={this.props.items}
        renderItem={({ item }) => this._renderItemRowMode(item)}
        keyExtractor={(item, index) => index}
        initialNumToRender={8}
        getItemLayout={(data, index) => ({ length: 100, offset: 100 * index, index })}
        style={styles.container} />
    );
  }

  return (
    <FlatList
      data={this.props.items}
      renderItem={({ item }) => this._renderItemCardMode(item)}
      keyExtractor={(item, index) => index}
      initialNumToRender={8}
      numColumns={2}
      getItemLayout={(data, index) => ({ length: 300, offset: 300 * index, index })}
      style={styles.container} />
  );
}

两个项目只有几个视图和一个图像，并且都有一个shouldComponentUpdate，它被优化为仅在需要时呈现，如下所示：

卡片视图：

• 图像，一个视图和一些文本，所有内容都包含在TouchableOpacity
中

行视图：

• 图像，一个视图，一些文字和一个TouchableOpacity，所有内容都包含在TouchableOpacity中

我也使用相同的列表进行测试，但根据视图模式渲染一个组件或另一个组件。

重点是：

我应采取哪种优化或策略来获得更自然，更敏感的列表？

注意： 为了简单起见，我省略了项目组件，因为它们并不太复杂。如果您认为它们有用，请随意让我包括它们。

环境：

• ＆＃34;反应＆＃34;：＆＃34; 16.0.0-alpha.12＆＃34;
• ＆＃34; react-native-vector-icons＆＃34;：＆＃34; ^ 4.4.2＆＃34;
• ＆＃34; react-native＆＃34;：＆＃34; 0.47.1＆＃34;
• 平台Android
• 在设备上
• 发布模式（react-native run-android --variant=release）

Answer 1

initialNumToRender 效率不高，它会同时渲染更多项目，因为它会多次触发 onEndReached ，传递8个元素的数组或者没有想要初始渲染的元素，然后 onScroll 找到它到达结尾然后相应地附加数据。