“改用新的 FlatList 或 SectionList 组件。除了简化 API 之外，新的列表组件还具有显着的性能增强，主要是任意行数的内存使用量几乎保持不变。”
这在 React Native 的官方文档中有说明。然而，无论我多么努力，FlatList 的内存使用量在向下滚动时只会不断飙升。与使用更少内存的 ListView 组件相比。
【问题讨论】：
标签： reactjs listview react-native react-native-flatlist
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 尽可能多地呈现项目，并且它离可见项目越远，它赋予项目呈现的优先级就越低。它可以虚拟存储不在屏幕上的项目，以便在用户滚动时立即将它们推送到屏幕上。如果您不优化组件渲染方法，这可能会导致大型列表的内存使用失控。
【讨论】：