滚动Flatlist时，内存使用量越来越高，并且停止滚动后内存未被释放（React Native）。

Question

我正在我的React Native项目中使用Flatlist和SectionList，并且有300多行数据。然而，我发现一个严重的问题，就是当我不停地向下和向上滚动时，内存使用量越来越高。我该如何解决这个问题？或者说，我该如何释放内存？

我知道这里有一些相关的问题，但我已经尝试了许多解决方案，但没有一个有效。

例如，

1. 我使用了Pure.component或shouldcomponentUpdate 2. 我使用了Flatlist和SectionList的一些props

initialNumToRender={9}
windowSize={10}
maxToRenderPerBatch={2}
removeClippedSubviews={true}
disableVirtualization={true}
getItemLayout={this.getItemLayout}
keyExtractor={(item, index) => item[0]}
extraData={this.state}

还有其他解决方案可以帮助我解决问题吗？非常感谢！

- Lynn

---

尝试在行项目上应用overflow: 'hidden'样式。 - Melih Mucuk

嘿，你有没有解决这个问题的方案？ - Mayuresh Patil

Answer 1

disableVirtualization={true}就是关闭FlatList提供的虚拟化功能，如果内存是一个问题，我建议不要使用它。因此，我建议首先删除此属性。

接下来，我会调查问题是由于有太多项目（因此UI中保存它们需要太多RAM），还是您的项目存在内存泄漏（因此即使将其从UI中删除后它们仍然占用内存）。

FlatList的windowSize控制将保持渲染的“不可见”项目数量。如果将windowSize设置为“1”，则只会呈现可见项目（尝试一下，看看当您滚动FlatList时会发生什么）。 windowSize为“21”（默认值）将呈现可见项目以及左侧和右侧（或顶部和底部）可见区域的10个“窗口”。因此，如果窗口大小为，假设是1000px，则当前不可见但距离可见区域不到10000px的任何项目都将由FlatList提前呈现。

这是我解决问题的方法：

• 首先，我会将windowSize设置为非常大的值（例如100），以确保所有300多行都能保留在内存中。您可以打开应用程序并等待一段时间，直到所有项目都被渲染出来（如果您有300多个项目和一个maxToRenderPerBatch设置为2，则这意味着FlatList将花费150多个“周期”才能完成所有渲染，因此可能需要一段时间。为了实验的缘故，您还可以将initialNumToRender设置为非常高的数字（例如1000），以便在列表渲染时，您知道它已经完全渲染出来。但是很可能应用程序在此之前会冻结几秒钟）。一旦列表全部显示出来，请查看您的应用程序使用的内存量。在这种情况下，上下滚动不应增加内存使用量，因为所有内容都已经在UI中:-)。请注意此内存量，因为它将成为您的基线。
• 其次，我会将windowSize设置为可能的最小数字（例如1）。现在，当您打开具有大量数据的屏幕时，React只会呈现屏幕中可见的部分。使用的内存应该比先前的情况要小得多。但是，随着滚动，由于受限制的windowSize，React将不断销毁并创建新的UI元素。如果您滚动得越多，内存使用量就越多（即使您停止滚动一段时间后也永远不会回去），那么您的视觉组件中可能存在内存泄漏需要修复。如果是这样，将列表缓慢滚动到底部，然后缓慢滚动回顶部甚至可能导致使用更多的RAM。

调整windowSize和其他一些设置可能会给您想要的结果，但是查找内存泄漏可能很困难。如果有内存泄漏，我最近读过一篇有趣的文章：https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde。此外，请避免使用调试版本检查RAM使用情况：不仅它们使用更多内存，调试工具（例如console.log等）可能会创建不存在于发布版本中的泄漏。

- rsalmeidafl