RN Flatlist减少render次数

rn的诟病来自于本身的框架底层问题。
设计之初,以安卓为例,居然只从一个activity里渲染各种pages,于是乎留存在了各种性能上的问题,out of memory,甚至无法打印this,页面堆栈导致的物理返回键需要由一个公用父处理什么的……问题多多。

可这些其实都是小问题,问题比较严重的却是一个很常见的且该存在的深度检查导致的问题。如果说浅比较state比较节省性能,那么就不应该出现setState({a:0})时会导致整个组件的重新render。

这个问题虽然严重,但是更为严重的却是任何子组件都是一个实实际际的object,也许你会说,肯定都是obj,这个没毛病。确实,但是在flatlist中你发现这个问题,即每次渲染都会重新return出新对象,这次100,下次还是100……你就会真正的觉得react应该把这个地方作为优化项。

为什么呢?比如item1中存在一个会变化的数值,那么当我手动变化该数值时在flatlist中会出现什么情况呢?我们为了让flatlist能检测到我们的数值变化,我们设置extraData为this.state。

1:我变更了100条数据其中的一条数据的数值。
2:页面发生了render周期。
3:因为设置了extraData进行数据检测,所以遍历比较完当前的整个state和下一次state之间的不同,进行数据更新。
4:flatlist开始重新render出每个item。
5:整个页面重新载入数据。

整个过程在测试中81条数据的话,在 小米8se手机的骁龙720 下几近需要1.3秒!这是一个恐怖的事情,如果是这样,那么812,n那该怎么办?

我们对待重新render每个item毫无办法,但是好在我们知道这个item其实结构并不复杂,顶多算是牺牲内存。
然后我们发现去掉extraData的时候,整个过程变快了,达到了ms级。所以我们考虑从主动为每个即将render的item进行数据比较,来决定这个item是不是应该重新render。

于是我们在shouldComponent里获取当前item尚未变化的视图里的数值,然后和state中的值进行比较来决定是否render(其实怎么说item都会render,这里只不过是去掉由setState引发的多次render)。

至此,81条数据的情况下开始变得十分顺畅,测试更多条同样很顺利。

本以为事情会就此结束。
如果你有长得一毛一样的数据,且你这个时候要使用key来提前指定控件pos,减少开销的话,你就会发现item会瞎跳,因为rn为了节省性能,实际只渲染当前屏幕,所以发生了这种情况。

如果你在使用如上方式解决了卡顿。然后你要使用onScroll方法,你就会发现变化单个item的数值的时候又卡了……
兴许如果真有人遇到这种情况,早就抄起原生把自己的list封装出来用了。我也没有心情再去深究了,于是我在外面包了层scrollView,确实不卡了,可是,我发现flat的scrollTo类似的任何方法都没法生效了……
于是我们需要干嘛呢?我们只能使用scrollview的scrollTo来代替flat的scrollTo的类似方法,于是我们要为每一个item提前计算好它的startY,如果有必要,我们还将测量它的item高度,来算得endY,为下一个item的startY做打算。

然后我们终于解决了这些问题,可是问题又来了。

如果我们得flatlist实际上也来自一个组件,它的根组件有个同级组件需要主动改变flatlist某个item的值。

结构示例:
pages:主页面
cate:flatlist组件
item:flatlist的item组件
cat:发起变化的同级组件

于是,我们怎么做到在pages里发起item的变更呢,因为我们拿到了cate的flatlist组件我们也拿不到所以item对象。这也是比较鸡肋的地方,flat树结构真的没做好。
在cate里把每个item渲染的时候都把它们加入到一个叫itemGroup的数组。我们在cat的时候判断itemGroup是否可用,如果是,那么我们遍历itemGroup,执行我们写好在item里的refresh。总的来说,还是会卡一点儿,但是,貌似别无他法了。

水逆退散吧

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前天晚上只有我跟儿子在家,当他放学回来后,准备给他煮买回来的馄饨时,定要拉着我跟他一起做刚刚学会的推手游戏。原本想...
    听雨聆声阅读 1,449评论 2 14
  • 看到这个题目时,有没有一种“你看,你看,又出来装逼了”的感觉。 这个真不是装出来的,题目本是一本书的名字,作者是麻...
    公爵在路上阅读 1,891评论 0 4
  • 一、录课 荔枝用来转播 千聊用来录我们自己的课程 1.自己的课程可以发限时优惠券,仅在群内分享,群友才有这个福利。...
    突突是糖宝妈阅读 1,254评论 0 0
  • 两年前开始接触简书,因为简书的markdown体验还不错,那时候就想纯粹的写一点文字,等老了再来品味自己的文字,后...
    喷气式蜗牛阅读 1,534评论 0 1
  • 经常看到别人的签名即炫酷又好看,用网上的自动生成签名的签名样式单一,还不能得到令自己满意的效果?来试试今天推荐的这...
    涩技师阅读 6,054评论 0 9