reactjs - React Native FlatList 与 ListView

Question

“改用新的 FlatList 或 SectionList 组件。除了简化 API 之外，新的列表组件还具有显着的性能增强，最主要的是任意数量的行的内存使用几乎恒定。”

React Native 的官方文档中对此进行了说明。然而，无论我多么努力，FlatList 内存使用量在向下滚动时都会不断飙升。与 ListView 组件相比，它使用的内存要少得多。

Answer 1

TLDR

创建一个 PureComponent 以在 renderItem 中使用:类ListItem扩展了React.PureComponent

那么您需要确保实现shouldComponentUpdate

此外，当我在 ScrollView 内有 FlatList 时，我似乎遇到了性能问题

所以我一整天都在搞乱这个问题，试图弄清楚为什么 FlatList 会耗尽我的 RAM 使用量，并用我的几千个列表耗尽我的电池。我看到的是每个项目多次调用 renderItem 。如果我有 100 个项目，则将为项目 1-10 调用一次 renderItem，然后为项目 1-10 再次调用一次，为项目 10-20 调用一次，然后为项目 1-20 再次调用一次，为项目 1-20 调用一次。项目 20-30 等等。这让我很困惑为什么会发生这种情况。但我意识到，如果没有任何优化，这意味着它正在重建该列表中的每个项目并呈指数级增长。要解决这个问题，您需要执行以下操作:

按照文档中的建议创建一个 PureComponent 以进行优化:类ListItem扩展了React.PureComponent

那么您需要确保实现shouldComponentUpdate

一旦我做了这两件事，我的 JS FPS 和 RAM 使用率就保持水平，直到我滚动，分别有一点下降和峰值，但重要的是它们回到了一个不错的水平。与之前相比，我看到 JS 的 FPS 为 1，RAM 使用量超过 1 GB。

似乎 FlatList 会渲染尽可能多的项目，并且距离可见项目越远，渲染项目的优先级就越低。它以虚拟方式存储不在屏幕上的项目，以便当用户滚动时可以立即将它们推送到屏幕上。如果不优化组件渲染方法，这可能会导致大型列表的内存使用失控。