React Native iOS 应用程序使用大量内存答案

【问题标题】：React Native iOS app using large amount of memoryReact Native iOS 应用程序使用大量内存
【发布时间】：2018-07-27 22:13:14
【问题描述】：

我正在构建我的第一个 react 原生 ios 应用。这个应用程序的主要功能是向服务器发出请求，获取数据并将其呈现在FlatList 中。在初始加载时，FlatList 内的 15 个列表项会被渲染，当用户向下滚动时，每次用户到达列表底部时都会添加 15 个。呈现的列表项总数为 500。

我一直在使用 Instruments 分析我的应用，虽然看起来没有内存泄漏，但该应用使用大量内存来渲染列表。

在 Instruments 的下图中，您可以看到分配的总数（超过 300 万），以及总字节数和持久字节数。下面的监控只持续了一分钟多一点，你在图表中看到的每一步都是用户到达列表底部的时间，并且加载了更多数据。

在 1 分钟内，使用了超过 700MiB 的内存，其中 178MiB 是持久的。对于一个简单的FlatList 来说，这似乎太高了。我是不是误解了什么？

下面是我FlatList的render()方法：

render() {
  // If loading, render activity indicator
  if (this.props.isLoadingPosts) {
    return (
      <View style={commonStyles.center}>
        <ActivityIndicator />
      </View>
    );
  }
  // Otherwise render posts
  return (
    <View>
      <FlatList
        style={styles.fullHeight}
        data={this.props.data}
        extraData={this.props.loadingMore}
        keyboardShouldPersistTaps='always'
        keyExtractor={(item, index) => index.toString()}
        ItemSeparatorComponent={this.renderSeparator}
        ListFooterComponent={this.renderFooter}
        refreshing={this.props.refreshing}
        onRefresh={this.onRefresh}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={0.5}
        renderItem={({ item }) => (
          <ListItem
            item={item}
            onPressItem={() => this.showPost(item)}
            navigator={this.props.navigator}
          />
        )}
      />
    </View>
  );
}

我不确定是什么导致了如此高的内存使用率。我正在使用 redux 和 redux-persist 来存储和改变数据，但最不敏感的功能是向服务器发出请求。有谁知道如何减少或修复这种大内存消耗？

【问题讨论】：

您的屏幕截图显示 44 MB 的内存使用量（所有堆分配），而不是 178 MB。额外的 134 MB 是您的应用程序没有分配的虚拟内存。我没有使用过 React-native，所以我不能告诉你 44 MB 对于一个简单的平面列表来说是否很高。
我相信您遇到了一个已知问题，#13413 FlatList and VirtualizedList Scroll performance is laggy after 30+ rows。
仅供参考，您使用哪个工具来跟踪内存泄漏？
@Mayoul 它是 macOS 上的 Instruments.app
是的，是通过 Xcode 找到的。谢谢。 !

标签： ios react-native memory memory-management instruments

【解决方案1】：

我遇到了一个场景，我应该渲染超过 5000 行。我使用https://github.com/Flipkart/recyclerlistview 处理这个问题您需要在后台应用后台获取的逻辑，假设您从网络上获取了前 100 行，您需要在滚动到 80 行时在后台获取下一批，即 100 行数据。

onScroll={({nativeEvent}) => {

                            this.lastScrollPosition = nativeEvent.contentOffset.y;
                            const isToLoadNextBatch = this.currentScrollPosition(nativeEvent);
                            this.onScrollPosition(isToLoadNextBatch);

                        }}

【讨论】：