react-native for android 重构与优化

背景

PM 提了一个需求:我们要做一个 app,有 xxx 功能,暂时先支持这么多,用 rn 现有的框架,目前先用 ipad 运行,android 平台有硬件的锅。但是我们三天后要上线。

我: ???? wut ?

开始进入写垃圾代码模式。 怎么快怎么来,就几个简单的页面,不需要跨页面组件沟通,要什么 redux,state 就能搞定。封装?不存在的,能写完就不错了。 三天后,项目如期上线,经过一段时间的怼代码迭代,pm 突然有一天跑来说: xxx,我们现在需要支持 android 平台。

我: ???? wut ?

经过一番适配,跑了一下,ui 大致没啥问题,业务也能跑通。但是 tmd 怎么这么卡呢?而且 ipad 一点都不卡,android 这么卡 ???

分析问题

app 在某个页面一直有个类似于轮询的机制,不停的请求数据,刷新页面,在 android 中,这个方式是 native 暴露方法,js 层直接调用,200ms 一次请求。由于前期的粗糙迭代,没有什么子组件一说,页面组件层级不超过3级,state 全部在父级维护,看了下大概200多行,自己都慌了,这不就意味着每 200 ms,所有组件都会重新重新进行 diff 比较,然后判断是否重新渲染吗,这么多组件,不卡才有鬼。

解决方案

按照页面模块拆分结构,把所有模块拆成独立的个体,不会相互影响,都用 shouldComponentUpdate 判断比较。

抽取一个模块做测试

先抽离那个 200ms 请求刷新页面的模块,抽成子组件后,state 在内部维护,里面刷新,父组件稳如泰山,这个方法可行。

native 方案

native 是与 plc 通信,串口交流,大部分地方为了线程安全,都加了锁。但是在 js 请求 native 方法的时候,还是在主线程获取的数据,所以会影响操作。

将这部分方案,由类生产者与消费者模式改成观察者模式。

native 的这部分代码都由 service 处理,并通过事件告诉 js ,在 js 的注册事件回调中获取数据并刷新界面

总结

乱怼一时爽,重构火葬场

Abner_泥阿布 wechat
欢迎您扫一扫上面的微信公众号,订阅我们的公众号!
或者欢迎加入QQ群:568863373。


如果你觉得这篇文章对你有帮助,请点击下面的分享链接,你还可以选择扫描二维码进行打赏!

我的Github

我的新浪微博