反应本机FlatList与ListView [英] React Native FlatList vs ListView
问题描述
改为使用新的FlatList或SectionList组件.除了简化API外，新的list组件还具有显着的性能增强，主要是几乎恒定的任何数量行的内存使用."
"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组件相比.
This is stated on React Native's official docs. However, no matter how hard I try, FlatList memory uses just keeps sky rocketing when scrolling down. Compared to ListView component which uses way less memory.
推荐答案
TLDR
创建在renderItem中使用的PureComponent:
class ListItem extends React.PureComponent
Create a PureComponent to use in renderItem:
class ListItem extends React.PureComponent
然后您需要确保实现shouldComponentUpdate
当我在ScrollView
因此，我整天都在弄乱这一点，试图弄清为什么FlatList消耗了我的RAM使用量，并用几千个列表将电池吸干了.我看到的是多次为每个项目调用renderItem.如果我有100个项目，则renderItem将被称为1-10，一次针对1-10，一次针对10-20，然后再次针对1-20，一次针对20-30，很快.这让我感到困惑，为什么会这样.但是我意识到，没有任何优化就意味着它正在重建该列表中的每个项目并呈指数增长.要解决此问题，您需要执行以下操作:
So I have been messing this this all day trying to figure out why the FlatList was blowing out my RAM usage and sucking my battery dry with my list of several thousand. What I was seeing was renderItem was called for each item multiple times. If I had a 100 items, renderItem would be called once for items 1-10, then again for items 1-10 and once for items 10-20, then again for items 1-20 and once for items 20-30 and so on. This baffled me as to why this was happening. But what I realized was that without any optimization that meant that it was reconstructing every item in that list and growing exponentially. To solve this problem here is what you need to do:
像在文档中建议的那样创建PureComponent以进行优化:
class ListItem extends React.PureComponent
Create a PureComponent like they suggest in the docs for optimizations:
class ListItem extends React.PureComponent
然后，您需要确保实现shouldComponentUpdate
Then you need to be sure you implement shouldComponentUpdate
一旦我做了这两件事，我的JS FPS和RAM的使用率就会保持水平，直到我滚动到分别有一点下降和峰值的地方，但是重要的是它们又回到了一个不错的水平.这与之前我从JS中看到1 FPS和超过一千次的RAM使用情况进行了比较.
Once I did those two things my JS FPS and RAM usage remain level until I scroll where there is a little dip and spike respectively but the important part was they came back to a nice level. This is compared to before where I was seeing 1 FPS from JS and over a gig of RAM usage.
似乎FlatList可以渲染尽可能多的项目，并且它与可见项目之间的距离越远，则渲染项目的优先级就越低.它将未存储在屏幕上的项目保留为虚拟存储，以便在用户滚动时将其立即推到屏幕上.如果不优化组件渲染方法，这可能导致大量列表占用大量内存.
It seems like FlatList renders as many items as it can and the further away it gets from the items that are visible the lower the priority it gives rendering of the items. It keeps the items that are not on the screen stored virtually so that they can be pushed to the screen right away when the user scrolls. This can lead to runaway memory usage with large lists if you do not optimize the component rendering method.
这篇关于反应本机FlatList与ListView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
