[[173757]]

作者：李寧老師

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

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

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

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

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

那么ReactNative和React.js有什么區(qū)別呢?

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

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

那么什么是VirtualDOM呢?

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

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

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

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

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

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