React Native 簡介與入門
一、簡介
ReactNative.png
React Native 是Facebook發(fā)布的，可以讓我們廣大開發(fā)者使用JavaScript和React開發(fā)我們的應(yīng)用，該提倡組件化開發(fā)，也就是說React Native給我們提供一個(gè)個(gè)封裝好的組件讓開發(fā)者來進(jìn)行使用，甚至我們可以相關(guān)嵌套形成新的組件。
使用React Native我們可以維護(hù)多種平臺(tái)(Web,Android和IOS)的同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用。
現(xiàn)階段Web APP的的體驗(yàn)還是無法達(dá)到Native APP的體驗(yàn)，所以這邊f(xié)ackbook更加強(qiáng)調(diào)的是“learn once, write everywhere”，應(yīng)用前端我們使用js和React來開發(fā)不同平臺(tái)的UI，下層核心模塊編寫復(fù)用的業(yè)務(wù)邏輯代碼，提供應(yīng)用開發(fā)效率。
React Native的設(shè)計(jì)理念：既擁有Native的用戶體驗(yàn)、又保留React的開發(fā)效率。
React Native項(xiàng)目成員Tom Occhino發(fā)表的React Native: Bringing modern web techniques to mobile詳細(xì)描述了React Native的設(shè)計(jì)理念。
Occhino認(rèn)為盡管Native開發(fā)成本更高，但現(xiàn)階段Native仍然是必須的，因?yàn)閃eb的用戶體驗(yàn)仍無法超越Native：
- Native的原生控件有更好的體驗(yàn);
- Native有更好的手勢(shì)識(shí)別;
- Native有更合適的線程模型，盡管Web Worker可以解決一部分問題，但如圖像解碼、文本渲染仍無法多線程渲染，這影響了Web的流暢性。
注意：
目前react native在ios上僅支持ios7以上,Android僅支持Android4.1以上。
二、框架簡單描述
reactnative超簡框架.png
- React：不同平臺(tái)上編寫基于React的代碼，“Learn once, write anywhere”。
- Virtual DOM：相對(duì)Browser環(huán)境下的DOM(文檔對(duì)象模型)而言，Virtual DOM是DOM在內(nèi)存中的一種輕量級(jí)表達(dá)方式(原話是lightweight representation of the document)，可以通過不同的渲染引擎生成不同平臺(tái)下的UI，JS和Native之間通過Bridge通信。
- Web/iOS/Android。(現(xiàn)在均已實(shí)現(xiàn))
三、什么是React和Native
1.React
React是Facebook開發(fā)的一款JS庫.
React是實(shí)際上就是一個(gè)JavaScript框架，用于構(gòu)建“可預(yù)期的”和“聲明式的”Web用戶界面，它已經(jīng)使Facebook更快地開發(fā)Web應(yīng)用。
更詳細(xì)簡介可以參考文章：http://www.jianshu.com/p/ae482813b791
React入門可參考文章：http://www.ruanyifeng.com/blog/2015/03/react.html
2.Native
這里的理解，ReactNative里的Native值的是Native應(yīng)用。
Native App是一種基于智能手機(jī)本地操作系統(tǒng)如iOS、Android、WP并使用原生程式編寫運(yùn)行的第三方應(yīng)用程序,也叫本地app。
四、個(gè)人的學(xué)習(xí)路線
1. 環(huán)境的搭建，初始化工程
2. 對(duì)flex布局、css樣式進(jìn)行簡單的學(xué)習(xí)和運(yùn)用(原本沒基礎(chǔ))
3. es6語法(本人純iOS開發(fā)，無JavaScript基礎(chǔ)，只能簡單了解下，再邊運(yùn)用邊學(xué)習(xí))
4. 組件的簡單編寫，頁面刷新
5. 集成到原生項(xiàng)目，與原生交互
6. 網(wǎng)絡(luò)層、model層及數(shù)據(jù)處理
五、推薦學(xué)習(xí)參考的網(wǎng)站/文章
ReactNative 中文網(wǎng)：http://reactnative.cn/docs
江清清的React Native專題：http://www.lcode.org/react-native/
ES6入門：http://es6.ruanyifeng.com/#docs/class
Flex布局入門：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
這是邁出的***步。。。望支持
