React Native FlatList vs ListView

Question

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

这是在React Native的官方文档中说明的。然而，无论我怎么努力，FlatList内存使用只是在向下滚动时保持天空飙升。与使用较少内存的ListView组件相比。

Answer 1

<强> TLDR

创建一个要在renderItem中使用的PureComponent： class ListItem extends React.PureComponent

然后您需要确保实施shouldComponentUpdate

当我在FlatList

内有ScrollView时，我似乎也遇到了性能问题

所以我整天都弄乱了这个，试图弄清楚为什么FlatList会耗尽我的RAM使用量并用几千个列表吸干我的电池。我所看到的是多次为每个项目调用renderItem。如果我有100个项目，则{1-10}将为项目1-10调用一次，对项目1-10再调用一次，对项目10-20调用一次，对项目1-20再次调用一次，对项目20再次调用一次30等等。这让我感到困惑，为什么会这样。但我意识到，没有任何优化意味着它正在重建该列表中的每个项目并呈指数级增长。要解决这个问题，您需要做的是：

像他们在优化文档中建议的那样创建一个PureComponent： renderItem

然后，您需要确保实施class ListItem extends React.PureComponent

一旦我完成了这两件事，我的JS FPS和RAM使用量保持水平，直到我滚动分别有一点点下降和尖峰，但重要的部分是他们回到了一个很好的水平。这与之前我从JS中看到1个FPS和使用大量RAM的情况进行了比较。

似乎FlatList渲染了尽可能多的项目，并且它从可见项目中获得的距离越远，它给予项目渲染的优先级越低。它可以保存屏幕上不存在的项目，以便在用户滚动时立即将它们推到屏幕上。如果不优化组件呈现方法，这可能会导致大型列表的内存使用失控。