当我滚动平面列表时,内存使用率越来越高,当我停止滚动时,内存不会释放(React Native)



我在我的反应原生项目中使用 Flatlist 和 SectionList,我有 300+ 行数据。但是,我发现了一个严重的问题,那就是当我不断向下和向上滚动时,内存使用率越来越高。如何解决这个问题?或者如何释放内存?

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

例如,

1. 我使用了Pure.component或shouldcomponentUpdate

阿拉伯数字。 我使用了Flatlist和SectionList的一些道具

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

还有其他解决方案可以帮助我解决问题吗?多谢!

disableVirtualization={true}基本上关闭了FlatList提供的虚拟化功能,因此如果内存是一个问题,我不建议使用它。所以我会从删除这个道具开始。

然后,我会调查问题是否在于项目太多(因此需要太多 RAM 才能将它们保留在 UI 中(,或者您的项目中是否存在内存泄漏(因此即使它们从 UI 中删除后,它们仍然会消耗内存(

FlatList 的 windowSize 控制将保持呈现的"不可见"项目数量。如果将 windowSize 设置为"1",则只会呈现可见项(尝试一下,看看滚动平面列表时会发生什么(。窗口大小"21"(默认值(将呈现可见项目,加上可见区域的左侧和右侧(或顶部和底部(的 10 个"窗口"。因此,如果窗口测量,假设为 1000px,则任何现在不可见但距离可见区域小于 10000 像素的项目都将由 FlatList 提前渲染。

这就是我解决问题的方式:

  • 首先,我将 windowSize 设置为一个非常大的值(例如 100(,以确保所有 300+ 行都将保存在内存中。您可以打开应用程序并等待一段时间,直到所有项目都已呈现(如果您有 300+ 项并且 maxToRenderPerBatch 设置为 2,这意味着 FlatList 将需要 150+ 个"周期"才能完成所有渲染,因此可能需要一段时间。您也可以仅出于此实验的目的,将 initialNumToRender 设置为非常高的数字(例如 1000(,以便在列表呈现时您知道它已经完全呈现。但很可能在发生这种情况之前应用程序会冻结几秒钟(。列表全部列出后,查看应用使用了多少内存。在这种情况下,上下滚动不应该增加内存使用量,因为一切都已经在 UI 中:-(。记下此内存量,因为它将是您的基线。
  • 其次,我将 windowSize 设置为尽可能小的数字(例如 1(。现在,当你打开包含大量数据的屏幕时,React 只会渲染屏幕上可见的内容。内存的使用量应该比前一种情况小得多。但是,当您滚动时,由于窗口大小受限,React 将不断销毁并创建新的 UI 元素。如果滚动得越多,使用的内存就越多(即使停止滚动一段时间,它也不会返回(,则视觉组件中可能存在内存泄漏,需要修复。如果这是真的,慢慢地一直滚动到列表的底部,然后慢慢地一直滚动到顶部,甚至可能导致使用的 RAM 比第一种情况更多。

内存泄漏可能很难找到,所以我希望简单地调整 windowSize 和其他一些设置就能提供您需要的结果。如果有内存泄漏,这是我最近读到的一篇有趣的文章:https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde

此外,避免使用调试版本检查 RAM 使用情况:它们不仅使用更多内存,调试工具(如控制台.log和类似的东西(可能会产生发布版本中实际上不存在的泄漏。

相关内容

  • 没有找到相关文章

最新更新