“使用新的FlatList或SectionList组件 . 除了简化API之外,新的列表组件还具有显着的性能增强,主要是对任意数量的行几乎恒定的内存使用 . ”
这在React Native的官方文档中有说明 . 然而,无论我怎么努力,FlatList内存使用只是在向下滚动时保持天空飙升 . 与使用方式较少内存的ListView组件相比 .
TLDR
创建要在renderItem中使用的PureComponent: class ListItem extends React.PureComponent
class ListItem extends React.PureComponent
那么你需要确保你实现 shouldComponentUpdate
shouldComponentUpdate
当我在 ScrollView 内部 FlatList 时,我似乎也遇到了性能问题
ScrollView
FlatList
所以我整天都弄乱了这个,试图弄清楚为什么FlatList会耗尽我的RAM使用量并用我的几千个列表吸干我的电池 . 我看到的是多次为每个项目调用 renderItem . 如果我有100个项目,则对于项目1-10,将再次调用 renderItem ,对于项目1-10再次调用 renderItem ,对于项目10-20将再次调用一次,对于项目1-20将再次调用一次,对于项目20-30将再次调用一次,依此类推 . 这让我感到困惑,为什么会这样 . 但我意识到,没有任何优化意味着它正在重建该列表中的每个项目并呈指数级增长 . 要解决这个问题,您需要做的是:
renderItem
像他们在优化文档中建议的那样创建一个PureComponent: class ListItem extends React.PureComponent
然后你需要确保你实现 shouldComponentUpdate
一旦我做了这两件事,我的JS FPS和RAM使用率保持水平,直到我滚动的地方分别有一点点下降和尖峰,但重要的部分是他们回到了一个很好的水平 . 这与之前我从JS中看到1个FPS和使用大量RAM的情况相比较 .
看起来FlatList会尽可能多地渲染项目,并且从可见项目中获得的距离越远,它就会提供项目的优先级 . 它可以保存屏幕上不存在的项目,以便在用户滚动时立即将它们推到屏幕上 . 如果不优化组件呈现方法,这可能会导致大型列表的内存使用失控 .
1 回答
TLDR
创建要在renderItem中使用的PureComponent:
class ListItem extends React.PureComponent
那么你需要确保你实现
shouldComponentUpdate
当我在
ScrollView
内部FlatList
时,我似乎也遇到了性能问题所以我整天都弄乱了这个,试图弄清楚为什么FlatList会耗尽我的RAM使用量并用我的几千个列表吸干我的电池 . 我看到的是多次为每个项目调用
renderItem
. 如果我有100个项目,则对于项目1-10,将再次调用renderItem
,对于项目1-10再次调用renderItem
,对于项目10-20将再次调用一次,对于项目1-20将再次调用一次,对于项目20-30将再次调用一次,依此类推 . 这让我感到困惑,为什么会这样 . 但我意识到,没有任何优化意味着它正在重建该列表中的每个项目并呈指数级增长 . 要解决这个问题,您需要做的是:像他们在优化文档中建议的那样创建一个PureComponent:
class ListItem extends React.PureComponent
然后你需要确保你实现
shouldComponentUpdate
一旦我做了这两件事,我的JS FPS和RAM使用率保持水平,直到我滚动的地方分别有一点点下降和尖峰,但重要的部分是他们回到了一个很好的水平 . 这与之前我从JS中看到1个FPS和使用大量RAM的情况相比较 .
看起来FlatList会尽可能多地渲染项目,并且从可见项目中获得的距离越远,它就会提供项目的优先级 . 它可以保存屏幕上不存在的项目,以便在用户滚动时立即将它们推到屏幕上 . 如果不优化组件呈现方法,这可能会导致大型列表的内存使用失控 .