reactjs - 当我滚动 Flatlist 时内存使用量越来越高，并且当我停止滚动时内存不会释放(React Native)

Question

我在我的 native 项目中使用 Flatlist 和 SectionList 并且我有 300 多行数据。但是，我发现了一个严重的问题，即当我不断向下和向上滚动时，内存使用率越来越高。我怎么解决这个问题？或者如何释放内存？

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

举些例子，

1.
我使用 Pure.component 或 shouldcomponentUpdate

2.
我使用了 Flatlist 和 SectionList 的一些 Prop

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

有没有其他解决方案可以帮助我解决问题？非常感谢!

Answer 1

disableVirtualization={true}基本上关闭了 FlatList 提供的虚拟化功能，所以如果内存是一个问题，我不推荐它。所以我首先删除这个 Prop 。

然后，我会调查问题是否是项目太多(因此将它们保留在 UI 中需要太多 RAM)，或者您的项目是否存在内存泄漏(因此即使将它们从他们仍然消耗内存的用户界面)

FlatList 的 windowSize 控制将保持呈现的“不可见”项目的数量。如果将 windowSize 设置为“1”，则只会呈现可见项目(尝试一下，看看滚动 FlatList 时会发生什么)。 windowSize 为“21”(默认值)将渲染可见项目，加上可见区域左侧和右侧(或顶部和底部)的 10 个“窗口”。因此，如果窗口测量，假设为 1000 像素，则任何现在不可见但距离可见区域小于 10000 像素的项目都将由 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 和类似的东西)可能会产生实际上不存在于发布版本中的泄漏。