反应本机 FlatList 与 ListView

React Native FlatList vs ListView

"Use the new FlatList or SectionList component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows."

这在 React Native 的官方文档中有说明。然而,无论我多么努力,FlatList 的内存使用量在向下滚动时只会让天空飞速上升。与使用更少内存的 ListView 组件相比。

TLDR

创建一个 PureComponent 以在 renderItem 中使用: class ListItem extends React.PureComponent

那么你需要确保你实现了shouldComponentUpdate

此外,当我在 ScrollView

中设置 FlatList 时,我似乎也遇到了性能问题

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

像他们在文档中建议的那样创建一个 PureComponent 以进行优化: class ListItem extends React.PureComponent

然后你需要确保你实现了shouldComponentUpdate

完成这两件事后,我的 JS FPS 和 RAM 使用率保持水平,直到我滚动到分别有一点下降和尖峰的地方,但重要的是它们回到了一个不错的水平。这与之前我从 JS 看到 1 FPS 和超过 RAM 使用量的情况相比。

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