[[173757]]

作者：李寧老師

東北大學計算機專業碩士。曾任沈陽東軟股份項目經理。51CTO學院簽約講師。從事軟件研究和開發超過20年。長久以來一直從事Java、Android、iOS、C++、Swift、Objective-C以及跨平臺游戲引擎(Cocos2d-x、Unity3D等)的開發和技術指導工作。對國內外相關領域的技術、理論和實踐有很深的理解和研究。

主要著作包括《Cocos2d-x實戰游戲開發指南》(即將出版)、《Swift權威指南》、《Android深度探索 卷1和卷2》、《Android開發權威指南(第二版)》、《Android開發完全講義(第三版)》、《Android高新之路面試寶典》、《Android深度探索(卷1)：HAL與驅動開發》、《Android應用開發實戰(第二版)》、《Java Web開發技術大全：JSP+Servlet+Struts+Hibernate+Spring》等暢銷書。

不管是互聯網公司，或是傳統的軟件公司，以及非IT企業，大多都需要開發各種類型的程序，包括移動App(主要是Android和iOS)、Web程序、服務端程序等。這些程序使用的開發技術都不盡相同，如Android使用Java開發，iOS使用Objective-C或Swift開發、Web程序頁面使用JavaScript、HTML5、CSS等技術，而服務端的選擇就更多了，如Java EE、PHP、Python、Ruby、Node.js等。理論上，每一類的程序需要不同的開發小組完成，如Android開發小組、iOS開發小組，服務端開發小組等。這對于大公司沒什么問題，反正錢多。不過對于大多數創業公司來說，可能是一筆不小的負擔。

為了解決這個問題，現在出現了很多跨平臺技術，包括基于HTML5的混合開發、C++跨平臺解決方案等。不過這些也僅僅是跨平臺。頂多解決了Android和iOS之間代碼***限度共享的問題(仍然有一部分無法共享的代碼需要單獨編寫)，而服務端仍然要我們使用其他技術開發，如Java EE。不過自從有了Node.js以后，JavaScript就成為了服務端的開發語言，而且有了React.js，系統會將JSX代碼(在后面介紹)自動轉換Web頁面的DOM元素。這樣，JavaScript+JSX，連同Web+服務端一起搞定了，不過好像還少了點什么，對，移動端(Android和iOS)，這就是本文要講的主題：React Native，下面會詳細介紹一下React Native，以及用于設計UI的JSX。

React Native是Facebook 在 React.js Conf 2015 大會上推出的一個用于開發Android和iOS App的一個框架。主要編程語言是JavaScript，UI使用JSX(一種語法類似于XML的UI描述語言)。

那么ReactNative和React.js有什么區別呢?

任何一種跨平臺框架都有兩部分：UI和邏輯。對于這兩種技術來說，UI都使用的是JSX，而邏輯都是用了JavaScript。

React Native和React.js的主要區別還是JSX。不管是React Native，還是React.js，在UI上都有一種技術：虛擬DOM(Virtual DOM)

那么什么是VirtualDOM呢?

其實JSX只是一種語法糖。Web通過DOM管理Element。而DOM的效率是很低的，為了提高DOM的效率，React.js提供了VirtualDOM，這項技術的工作是完全在內存中完成的，而且是增量修改DOM樹，所以效率非常高。

對于Web來說，實際渲染時，仍然需要DOM，所以在最終渲染是，VirtualDOM仍然要轉換成實際的DOM。而對于Android和iOS，就沒有DOM的概念的，UI完全是本地控件實現的，如Android中的TextView、EditText等。所以React Native就應運而生。如果說React.js在運行時將Virtual DOM映射成了DOM，那么React Native就是在運行時將Virtual DOM映射成Android和iOS的本地控件。

從這一點可以看出，React.js用于Web開發，而ReactNative用于開發Android和iOS App，他們都將UI抽象成了Virtual DOM，只是在實際運行時，前者將Virtual DOM映射成了DOM，后者將Virtual DOM映射成了Android和iOS的本地控件。

由于ReactNative的UI仍然使用Android和iOS的本地控件，所以在UI渲染上已經非常接近Native App了。盡管業務邏輯代碼使用JavaScript，但由于JavaScript是即時編譯的，也就是***次運行時會將JavaScript代碼編譯成二進制，所以JavaScript的運行效率比較高。因此，React Native的運行效率要比基于HTML5、CSS等技術的PhoneGap、AppCan高很多，因為這些技術直接用HTML5進行渲染，而HTML5會大量使用DOM技術，DOM在PC端的Web中也不算快，在移動端就更慢了。

總結：基于ReactNative的App在運行效率上接近Native App，而且還擁有混合開發模式的兩個優點：熱更新(無需重新編譯上傳App即可更新，而且還不用通過App Store審核)和跨平臺(降低了學習成本，使用同樣的技術開發Android和iOS App)。

OK，現在已經了解了React Native，是不是打算學一下呢!移動、Web和服務端使用同一種技術即可解決，盡管都需要進行開發，但技術是通用的，也就是說只要招JavaScript程序員，就可以同時解決移動、Web和服務端的問題，使用一個開發小組即可解決所有問題，也無需再招聘Java、OC、Java EE、PHP程序員了，這樣會給創業公司節省了大量的開支。