版權聲明：本文由王少鳴原創文章，轉載請注明出處:
文章原文鏈接：https://www.qcloud.com/community/article/159
來源：騰雲閣 https://www.qcloud.com/community
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。
主要優化點：
1)去除了小平台so庫。
2)復用Qzone support jar。
二期規划：
1)在Qzone與ReactNative中間加Adapter，使ReactNative適配Qzone本身網絡庫及圖片庫，可以廢棄ReactNative框架的okhttp庫及fresco庫，減少包大小。
2.首屏加速與啟動速度
版本對比：
ReactNative改造后話題圈在wifi及緩存優化下，首屏相比H5快約 108ms，並且由於jsbundle緩存到本地，並且可以實現離線訪問。
ReactNative話題圈數據:
主要優化點：
1)更改源碼，新增預初始化接口，在Qzone Feeds渲染完成預加載ReactNative上下文。
2)首屏數據需要等前端走網絡請求拉取存本地，H5優先采用本地數據渲染。
優化前后流程對比：
二期規划：
1)目前為控制內存預加載ReactNative僅是上下文，打開仍有一部分耗時，這里可以嘗試緩存View，在打開時直接addview，達到秒開。
2)數據預拉取走的為http通道，可以使用wns httpproxy加速。
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版本基本持平。
話題圈詳細數據:
主要優化點：
1)JS層使Listview控件渲染數據，廢棄使用ScrollView控件。
2)視頻VideoView拆分，VideoCover交由H5實現，Native對應Fresco管理，MideaPlayer由Native實現。
二期規划：
目前官方暫提供的listview未采用item復用邏輯，僅在item不可見時置空，RecyclerView仍是Test控件只支持橫向滾動。listview性能仍需提高，下版本規划實現高可用RecyclerView。
四.ReactNative話題圈與H5話題圈整體數據對比
目前ReactNative在Web與Native通信耗時明顯優於webview的jsbridge方式(console.log)，在高中端機上如FPS及CPU上表現優於H5，但是從全局來看，目前crash，內存，FPS，首屏等均有優化空間，下面是整體對比數據。
五.寫在最后
React Native因你參與會更精彩，希望2016年能將更多的開發者加入React Native陣營，讓更多的業務都是 Ｗeb的版本節奏，Native的流暢順滑。
文章來源公眾號:QQ空間終端開發團隊(qzonemobiledev)