ReactNative For Android 項目實戰總結

版權聲明：本文由王少鳴原創文章，轉載請註明出處: 
文章原文連接：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)