[[173757]]

作者：李寧老師

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

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

不管是互聯(lián)網(wǎng)公司，或是傳統(tǒng)的軟件公司，以及非IT企業(yè)，大多都需要開發(fā)各種類型的程序，包括移動(dòng)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ā)小組等。這對(duì)于大公司沒什么問題，反正錢多。不過對(duì)于大多數(shù)創(chuàng)業(yè)公司來說，可能是一筆不小的負(fù)擔(dān)。

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

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

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

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

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

那么什么是VirtualDOM呢?

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

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

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

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

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

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