React Native 效能最佳化建議

1. 非同步逐層渲染。

React Native 雖然一直標榜媲美Native的體驗，但實際使用下來，其渲染性還是非常低效，基於ScrollView和ListView兩大容器，在渲染上，相當於web端的table布局，需要等整個大table渲染完成才顯示頁面，也就是說，當容器內有大量的子項目，其白屏時間會非常長。

如何讓React Native做到像web端邊渲染邊載入？可以採用非同步渲染的方式，使用requestAnimationFrame 或 setTimeout 定時將單個組件push進ScrollView容器。

基於這個原理，寫了個逐層渲染的組件：react-progressive

2. 實現shouldComponentUpdate方法

如上第一點，逐層渲染提升開啟時間，但是也會導致component重複渲染，也就是執行了大量無用的diff演算法。雖然React裡引以為傲的diff演算法非常高效，但是執行數量達到一定程度後，也會帶來非常大的影響。那麼可使用shouldComponentUpdate來控制component的渲染次數。

如何做？

•如果確定該組件渲染完後無需再次更新，即這個組件是一個靜態組件，那麼可以直接return false。

shouldComponentUpdate(){     return false

•如果組件比較複雜，自己對RN的更新機制不太熟，可以直接Minxi一下React提供的PureRenderMixin組件

mixins: [React.addons.PureRenderMixin]

•手動實現或使用第三方組件庫，比如Immutable-js
說白了，就是要確定組件內的不可變資料，讓其不再執行diff及render。

3. 使用setNativeProps方法
setNativeProps方法可以理解為web的直接修改dom。使用該方法修改View、Text等RN內建的組件，則不會觸發組件的componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate等組件生命週期中的方法。

建議頻繁更新的操作，如slider、tabs切換等拖曳操作時，使用setNativeProps來更新屬性，會獲得意想不到的效能體驗。

me.refs.tabView.setNativeProps({
                style : {
                    height : 0,
                    opacity : 0
                }
            });

效能分析工具：React.addons.Perf

4. 不要使用陰影製作效果
React Native 裡面的 shadow相關的樣式，是非常耗效能的css屬性。這在web上，以前android 2.0年代，也是一樣耗效能的css屬性之一。如果需要使用陰影製作效果，建議使用圖片來代替反而效能更好一些。

5. 最小化DOM
React Native裡虛擬dom結構越複雜，則越低效。感覺RN的渲染效能，和以前android2.x時代沒多大區別，如果層級結構大於5級，則要考慮下最佳化了。這沒啥技巧，純靠經驗及硬實力。

6.組件粒度化
如何更好的劃分組件粒度，這需要合理的對組件進行更細粒度的劃分，區分出靜態組件及動態組件

React Native 劣勢：

1.擴充性仍然遠遠不如web，也遠遠不如直接寫Native code（這個不用廢話解釋了吧）
2.從Native到Web，要做很多概念轉換，勢必造成雙方都要妥協。最終web要用一套CSS的閹割版，Native要費勁地把這個閹割版轉換成native原生的表達方式（比如iOS的Constraint\origin\Center等屬性），兩邊都會不爽。