记一次RN Android端在Mobx环境下使用FlatList导致列表错乱的问题

排查结果

首先说下结果,以供参考
github的issue有FlatList不显示的问题,表现的跟我不太一样,他们解决方案是将removeClippedSubviews={false},我尝试了一下不适用我的场景
最终找出罪魁祸首是mobx的observable变量与FlatList的data在release环境下,未关闭RN log日志所导致的冲突

  • 解决方案1:release环境关掉日志(我是用babel的transform-remove-console插件来关闭的)
  • 解决方案2:如果一定要开日志,FlatList的data不要给observable Array,给普通Array

问题描述

首先问题如下:
我的RN版本0.54.0,mobx3.4.1,mobx-react4.3.5

列表错乱现象

一个长度为两百多的数组只显示了二十三条,后面全是空白,继续往下划是一个无限空白的list,还伴随着闪屏现象,太可怕,更可怕的是debug包无此问题,release包却有,最怕排查这种问题,耗时耗力

解决思路

当时第一反应是没做分页一次性加载太多数据导致的,因为没有想到这个接口会有这么多数据,一般也就十几二十条,随即进行了分页处理,然而并没有什么卵用,仍然是二十三条后就显示空白,再往后滑动闪屏,此时也没有其他头绪,这下子只能啃源码来看什么原因了,不过好在FlatList是纯js实现的,不需要再去啃Java代码了。
首先找到FlatList.js文件,看它的render函数

render函数

通过配置legacyImplementation来选择使用MetroListView或者VirtualizedList前者是老的ListView,后者就是替代老ListView的新列表组件,官方解释这个变量是用来比较性能的,一般用不着,着重看看VirtualizedList,view出了问题首先就看看renderItem方法
VirtualizedList的renderItem方法

这里就只是区分了多栏与单栏列表,我的使用场景是单栏列表,这行代码就只是给FlatList使用者回传了一个info参数,再看看info参数具体,找到VirtualizedList的代码,再找renderItem这个props在哪里调用的,
CellRenderer的render方法里renderItem回传参数

可以看到是在CellRenderer这个组件的render方法里调用的,传入了item,index,separators,我们要找的就是item,但是item是从props中拿到的,再找找CellRenderer在哪里使用,可以看到是在_pushCells方法中使用,_pushCells方法在VirtualizedList的render方法中调用,
VirtualizedList的render方法

cells作为React.cloneElement(element,[props],[...children])的第三参数,如上图代码,此时基本可以确定问题应该在这个cells参数上了,再回头看看_pushCells方法
VirtualizedList的_pushCells方法

可以看到item数据是来自props的getItem方法,这个方法传入了一个data和一个ii下标,顾名思义应该就是在取单个列表的渲染数据,这个data就是FlatList的data,我们的列表数据源,再回到调用方FlatList找到getItem方法
FlatList的getItem方法

这个方法只是对多栏和单栏列表取数据的逻辑做了区分,我们可以试着把取出来的数据打印出来看是否有异常,加好调试代码,再编译一个带log的release包
item数据

可以看到第23个都挺正常,到了24个就不正常了,到了28个直接抛出error了,加了调试日志之后还会crash了,所以这个数据源可能有问题,联想到我用的Mobx框架,传给data的是一个Observable Array,而非普通Array,猜测是Observable Array与FlatList在此环境下有冲突,随后将其替换成普通Array,然后打包,测试一切正常

结尾

当时得出结论是FlatList和Observable Array搭配使用就会在release环境出问题,但是如果是这种结果,那问题影响面就太大了,然后发现我打的release包为了方便定位bug,将transform-remove-console这个插件屏蔽了,打开了js日志。随后我又试着关闭日志,FlatList继续使用Observable Array,然后打包,测试一切正常,然后就经过了几番测试,基本确认了问题所在,实在有点玄学,为了定位这一个bug,打了快一天的包。。当然结论不重要,重要的是解决问题过程,以后再遇到这种问题,解决起来应该更加得心应手

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容