“改用新的 FlatList 或 SectionList 组件。除了简化 API 外，新的列表组件还具有显着的性能增强，主要是对任意数量的行几乎恒定的内存使用量。”
这在 React Native 的官方文档中有说明。然而，无论我如何努力，FlatList 内存使用只会在向下滚动时保持天空飙升。与使用更少内存的 ListView 组件相比。
React Native FlatList 与 ListView
IT技术
reactjs
listview
react-native
react-native-flatlist
2021-05-02 00:21:07
1个回答
TLDR
创建一个 PureComponent 以在 renderItem 中使用：
class ListItem extends React.PureComponent
然后你需要确保你实施 shouldComponentUpdate
当我有一个FlatList内部时，我似乎也有性能问题ScrollView
所以我一整天都在搞这个，试图弄清楚为什么 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 渲染尽可能多的项目，并且它离可见的项目越远，它赋予项目渲染的优先级越低。它将不在屏幕上的项目虚拟存储，以便在用户滚动时可以立即将它们推送到屏幕上。如果您不优化组件渲染方法，这可能会导致大列表的内存使用失控。
其它你可能感兴趣的问题