“改用新的 FlatList 或 SectionList 组件。除了简化 API 之外，新的列表组件还具有显着的性能增强，主要是任意数量的行的内存使用几乎恒定。”
这在 React Native 的官方文档中有说明。但是，无论我多么努力，FlatList 内存使用量在向下滚动时都会不断飙升。与使用更少内存的 ListView 组件相比。
问问题
5326 次
1 回答
4
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 尽可能多地呈现项目，并且它离可见项目越远，它赋予项目呈现的优先级越低。它可以虚拟存储不在屏幕上的项目，以便在用户滚动时立即将它们推送到屏幕上。如果您不优化组件渲染方法，这可能会导致大型列表的内存使用失控。
于 2017-09-07T02:22:49.497 回答