android qzone 6.1版本在情侣空间涉水react native，以动态插件方式将情侣空间进行react natived的改造。在情侣空间基础上，android qzone 6.2版本以融合的方式将话题圈进行react native改造。本文主要讲述话题圈的开发改造流程，相关数据对比及性能优化，本次改造reactnative基于15release。
一、android侧项目整体开发流程
二、reactnative改造后话题圈整体流程
三、reactnative性能优化之路
本次版本开发周期较赶，加上视频组件本身相对复杂，融入reactnative耗时较多，部分优化规划在二期实施。
1、包精简
版本对比：
情侣独立插件:7.2m。
话题圈:本次reactnative框架移植入qzone整体仅加大了3.2m。
2、首屏加速与启动速度
reactnative改造后话题圈在wifi及缓存优化下，首屏相比h5快约 108ms，并且由于jsbundle缓存到本地，并且可以实现离线访问。
1.png
优化前.png
优化后.png
3、fps
h5话题圈:avgfps=54
reactnative话题圈:avgfps=52
主要优化点：
1.js层使listview控件渲染数据，废弃使用scrollview控件。
2.dom元素设置透明背景。
二期规划：
目前官方暂提供的listview未采用item复用逻辑，仅在item不可见时置空，recyclerview仍是test控件只支持横向滚动。listview性能仍需提高，下版本规划实现高可用recyclerview。
4、内存
情侣空间：无内存泄漏及浪费内存情况，比h5版本多约20%。
话题圈：无内存泄漏及浪费内存情况，与h5版本基本持平。
话题圈详细数据:
2.视频videoview拆分，videocover交由h5实现，native对应fresco管理，mideaplayer由native实现。
四、reactnative话题圈与h5话题圈整体数据对比
目前reactnative在web与native通信耗时明显优于webview的jsbridge方式(console.log)，在高中端机上如fps及cpu上表现优于h5，但是从全局来看，目前crash，内存，fps，首屏等均有优化空间，下面是整体对比数据。
五、写在最后**
react native因你参与会更精彩，希望2016年能将更多的开发者加入react native阵营，让更多的业务都是 Ｗeb的版本节奏，native的流畅顺滑。
后续关于reactnative的文章我们会持续推送，快关注我们的官方公众帐号吧。
下面二维码直达android qzone 6.2版本 下载安装，"发现" tab 中的话题圈即是使用reactnative改造后的，快下载体验吧。