前言

本篇內(nèi)容目前還是不涉及敲代碼，主要涉及到的內(nèi)容如下所示：

• React Native的由來
• React Native的優(yōu)勢
• 學(xué)習(xí)React Native前需要掌握的知識
• React Native項目目錄介紹
• React Native啟動文件詳解
• 補充

一、React Native的由來

1. 盡管在移動開發(fā)中，原生App的開發(fā)成本很高，但現(xiàn)階段原生開發(fā)仍然是必須的，因為基于iOS和Android webView控件的web app用戶體驗比較差。

2. React Native (簡稱RN)是Facebook于2015年4月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的UI框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物(文章最后說到RN和React的區(qū)別)，目前支持iOS和安卓兩大平臺。RN的業(yè)務(wù)邏輯使用Javascript語言編寫，UI用的是類似于XML的JSX和CSS。

3. RN開發(fā)擺脫了WebView，能夠讓你使用Javascript構(gòu)建最接近原生的APP。

二、React Native的優(yōu)勢

1. 使用虛擬DOM(Virtual DOM)來更新頁面

• 更新原理

  1. 將當(dāng)前的DOM樹放到內(nèi)存中

  2. 當(dāng)狀態(tài)變更時，會在內(nèi)存中構(gòu)建一個新的DOM樹，并且在內(nèi)存中讓新的樹和舊的樹會進行比較，并記錄兩棵樹的差異

  3. RN會把新舊兩棵樹不一致的內(nèi)容給重新渲染到舊的DOM樹上。已知的內(nèi)容不變。以此來實現(xiàn)顆粒化更新

2. 跨平臺開發(fā)

• 運用React Native，我們可以使用同一份業(yè)務(wù)邏輯核心代碼來創(chuàng)建原生應(yīng)用運行在Web端，Android端和iOS端；

3.應(yīng)用實現(xiàn)熱更新

• 目前蘋果為了安全考慮，已經(jīng)全面禁止熱更新了。

4. Learn once,Write everywhere

• RN不強求一份原生代碼支持多個平臺，所以不是write once,run anywhere。

5. 用戶體驗接近原生

• 不依賴于android和iOS的WebView
• 內(nèi)部會將RN控件轉(zhuǎn)換成原生控件

6. RN和原生可以混合開發(fā)

• 比如原生有一個已經(jīng)完善的模塊，RN提供比較簡潔的方式將該原生模塊橋接到RN里，供RN使用。RN不需要再重復(fù)寫類似的功能。

7. 針對組件開發(fā)

• 你要做一些試圖，官網(wǎng)提供View/Text/TextInput/ListView等組件。

• 你要做QQ和微信分享，社區(qū)里有react-native-qq、react-native-wechat組件

• 你要獲取系統(tǒng)權(quán)限，社區(qū)有react-native-permissions組件，可以幫組我們在RN里面獲取系統(tǒng)權(quán)限

• 比如你要做推送，激光推送官方專門維護一個react-native-jpush組件
  ........

三、學(xué)習(xí)React Native前需要掌握的知識

1. HTML

• 只需要知道怎么給標(biāo)簽設(shè)置內(nèi)聯(lián)樣式以及設(shè)置屬性，并深刻理解標(biāo)簽的語義化便可。

2. CSS

• 知道CSS的基本用法以及盒模型即可

3. JavaScript

• ES5、ES6需要熟練一個，ES6更好，RN現(xiàn)在強烈推薦ES6寫法，不熟悉的可以看看阮一峰寫ES6教程

4. 任意一種js開發(fā)工具

• webStorm（重量級IDE中開發(fā)RN最好的一種）
• VSCode(輕量級IDE中開發(fā)RN最好的一種)
• 兩者都支持RN插件，因為VSCode是輕量級，所以推薦VSCode

5. 熟悉iOS和android的開發(fā)最好

• RN里面教難實現(xiàn)的功能，最后還是需要原生來做

四、React Native的項目目錄介紹

• 不同的RN版本項目目錄可能有些小差別，目前我們需要關(guān)注的文件夾有以下幾個：

android--------------------------RN生成的android studio的android項目
iOS------------------------------RN生成的Xcode的iOS項目
node_modules---------------------RN項目使用的node模塊
index.android.js-----------------android項目的入口文件
index.iOS.js---------------------iOS項目加載的入口文件

• 打開index.android.js和index.ios.js兩個文件進行對比你就會發(fā)現(xiàn)這兩個文件中的內(nèi)容是一樣的

• 熟悉android和iOS的同學(xué)可以打開上面提到的相應(yīng)項目，將啟動文件設(shè)為自己的js文件。不熟悉的同學(xué)建議大家目前不要動，后面會慢慢提到

五、React Native啟動文件詳解

• RN中的組件,對應(yīng)HTML中的標(biāo)簽

• 第十行要特別注意：如果你下面用到的組件都要首先在這里引入。

• 建議同學(xué)模擬這個寫法多些幾遍，熟悉一下這個RN的編碼方式，這里面涉及的括號較多，寫的時候要特別注意。

啟動文件詳解

六、補充

1. React和React Native的區(qū)別

• React Native是Facebook早先開源的UI框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物。

• 相同點

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

• 不同點(主要在于虛擬DOM起到的作用)

  • React主要用于web開發(fā)，在運行時使用React將虛擬DOM裝換成了實際DOM

  • React Native主要用于開發(fā)Android和iOS App,就是在運行時將虛擬DOM映射成Android和iOS的本地控件