React Native 是最近非?；鸬囊粋€話題，上次一個遇到了我一個從北京回來的哥們，他也是做iOS的，跟他聊天的時(shí)候他說到了這個話題，他說他們公司的同事現(xiàn)在都在學(xué)這個，強(qiáng)烈推薦我閑的時(shí)候好好學(xué)習(xí)一下，所以，我也抽空翻閱了一些關(guān)于React Native的資料，但是介紹如何利用 React Native 進(jìn)行開發(fā)的文章和書籍多如牛毛，但面向入門水平并介紹它工作原理的文章卻寥寥無幾，所以好不容易才找了一些詳細(xì)的入門原理。

作為iOS的開發(fā)者來說，由于AppStore的審核周期的限制，如何動態(tài)的去更改app成了永恒的話題，無論采取那種方式，我們的流程總是可以歸結(jié)為以下三部分：從Server獲取配置->解析->執(zhí)行native代碼。

對于大部分時(shí)間，我們都是通過HTTP請求獲取到JSON格式的配置文件，利用解析出來的數(shù)據(jù)去通過OC的代碼去給UILabel、UIView、UITableView等等控件進(jìn)行渲染。就是利用這種方式，我們實(shí)現(xiàn)了在后臺配置app的展示樣式，但是如果業(yè)務(wù)要求頻繁的增加或者刪改內(nèi)容的話，這樣修改就會顯得很麻煩，而且JSON只是一種數(shù)據(jù)交換的格式，就是我們其實(shí)是在解析文本數(shù)據(jù)，其實(shí)就是我們通過這種方式我們只是在解析字符串而已，它完全不具備運(yùn)行和調(diào)試的能力。

現(xiàn)在隨著HTML5的大熱，我的身邊也有很多人在學(xué)習(xí)HTML5，作為一個前端小白，我對前端的理解就是用 HTML 創(chuàng)建 DOM，構(gòu)建整個網(wǎng)頁的布局、結(jié)構(gòu)，然后用 CSS 控制 DOM 的樣式，比如字體、字號、顏色、居中等，再用 JavaScript 接受用戶事件，動態(tài)的操控 DOM等也僅僅是局限在這些了解。在這3者的控制下幾乎所有的頁面功能都可以實(shí)現(xiàn)。但是如果想要動態(tài)的修改的話也是需要使用CSS和JS去先后處理。

初步認(rèn)識React

隨著Facebook的推出了React框架，我們可以把一組相關(guān)的 HTML 標(biāo)簽，也就是 app 內(nèi)的 UI 控件，封裝進(jìn)一個組件(Component)中，在JS中使用HTML的語法，這種方法被稱為JSX，它是JS的的一種語法擴(kuò)展。JSX將允許我們使用HTML標(biāo)簽或者React標(biāo)簽，它們將最終被轉(zhuǎn)換成為原生的JS并且創(chuàng)建DOM。

所以React就可以理解為其實(shí)是一套可以用簡介的語法高效DOM的框架，對于所謂的“簡介的語法”可以理解為暫時(shí)放下HTML和CSS，只關(guān)心如何用JS構(gòu)造界面。對于高效可以理解為React獨(dú)創(chuàng)了VirtualDOM機(jī)制，VirtualDOM是一個存在于內(nèi)存中的JS對象，它是與DOM一一對應(yīng)的關(guān)系，也就是說只要使用VirtualDOM就可以對DOM進(jìn)行渲染。所以當(dāng)界面發(fā)生變化的時(shí)候，得益于DOMDiff的算法，我們能夠知道VirtualDOM的變化，從而高效的改動DOM，避免了重新繪制DOM，最后換而言之，其實(shí)React并不是前端的全部，它相當(dāng)于MVC模式中的VIew部分，要想實(shí)現(xiàn)完整的MVC框架還需要Model和Controller的結(jié)合。在前端開發(fā)時(shí)我們可以使用Flux和Redux架構(gòu)，它們并不是架構(gòu)，而是一種和MVC相似的設(shè)計(jì)模式。

React Native

分別介紹完了移動端和前端的背景知識后，本文的主角——React Native 終于要登場了。

融合

前面我們介紹了移動端通過 JSON 文件傳遞信息的不足之處：只能傳遞配置信息，無法表達(dá)邏輯。從本質(zhì)上講，這是因?yàn)?JSON 畢竟只是純文本，它缺乏像編程語言那樣的運(yùn)行能力。

而 React 在前端取得突破性成功以后，JavaScript 布道者們開始試圖一統(tǒng)三端。他們利用了移動平臺能夠運(yùn)行 JavaScript 代碼的能力，并且發(fā)揮了 JavaScript 不僅僅可以傳遞配置信息，還可以表達(dá)邏輯信息的優(yōu)點(diǎn)。

當(dāng)痛點(diǎn)遇上特點(diǎn)，兩者一拍即合，于是乎：

一個基于 JavaScript，具備動態(tài)配置能力，面向前端開發(fā)者的移動端開發(fā)框架，React Native，誕生了！

看到了么，這是一個面向前端開發(fā)者的框架。它的宗旨是讓前端開發(fā)者像用 React 寫網(wǎng)頁那樣，用 React Native 寫移動端應(yīng)用。這就是為什么 React Native 自稱：

Learn once，Write anywhere!

而非很多跨平臺語言，項(xiàng)目所說的：

Write once, Run anywhere!

React Native 希望前端開發(fā)者學(xué)習(xí)完 React 后，能夠用同樣的語法、工具等，分別開發(fā)安卓和 iOS 平臺的應(yīng)用并且不用一行原生代碼。

如果用一個詞概括 React Native，那就是：Native 版本的 React。