栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

反应本机FlatList与ListView

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

反应本机FlatList与ListView

TLDR

创建要在renderItem中使用的PureComponent:

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可以渲染尽可能多的项目,并且它与可见项目之间的距离越远,则赋予项目渲染的优先级就越低。它将虚拟存储在屏幕上的项目保留下来,以便用户滚动时可以将它们立即推到屏幕上。如果不优化组件渲染方法,这可能导致大量列表占用大量内存。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/369978.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号