native react 的優點

標籤：

來源：知乎

 

React native充分利用了Facebook的現有輪子，是一個很優秀的整合作品，並且我相信這個團隊對前端的瞭解很深刻，否則不可能讓Native code「退居二線」。

 

對應到前端開發，整個系統結構是這樣：

JSX vs HTML

CSS-layout vs css

ECMAScript 6 vs ECMAScript 5

React native View vs DOM

無需編譯，我在第一次編譯了ipa裝好以後，就再也沒更新過app，只要更新雲端的js代碼，reload一下，整個介面就全變了。

多數布局代碼都是JSX，所有Native組件都是標籤化的，這對於前端程式員來說，降低了不少學習成本，也大大減少了代碼量。不信你可以看看JSX編譯後的代碼。

複用React系統，也減少了一定學習和開發成本，更重要的是利用了React裡面的分層和diff機制。js層傳給Native層的是一個diff後的json，然後由Native將這個資料對應成真正的布局視圖。

css-layout也是點睛之筆，前端可以繼續用熟悉的類css方式來編寫布局，通過這個工具轉換成constrain布局。

系統只有js-objc的單向調用，就是把原生UI組件的方法通過javascritcore或者webview（低版本iOS）映射到js中來，整個調用過程是非同步，這樣的設計令React native可以讓js運行在案頭chrome中，通過websocket串連Native code和案頭chrome，極大地方便了調試。對其中的機制Bang的一篇文章寫得很詳細，我就不拾人牙慧了：React Native通訊機制詳解 « bang’s blog 。但這樣設計也會帶來一些問題，後面說。

點按操作也被抽象成了一組組件（TouchableXXX），這種抽象方式是我在之前做類似工作中沒有想到的。facebook還列出Native為什麼和web「手感」不同的原因：即時的點按反饋和取消能力。React Native 這套相應機制設計得很完善，能像Native code那樣控制整個點按操作的所有過程。

Debug相當方便！修改了js以後，通過內建的nodejs watcher編譯成bundle，在模擬器裡面按cmd+r就可以看到效果。而且按cmd+d，可以開啟一個chrome視窗，所有的js都移到了chrome裡面運行，所以什麼斷點單步打調用棧，都不在話下。

穩賺理財助手開發痛點主要在於目前對native react不熟，接下來會提高速度。

native react 的優點