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改造後的，快下載下傳體驗吧。