當React開發者初次走進React-Native的世界

RN千機變

1.技術體系問題

RN和React共用一套抽象層，相對於前端，RN其實更接近Node的運行環境

ReactNative =React +IOS +Android

看RN文檔時，我會發現入門基礎那一塊介紹的都是React的內容，進階篇則介紹了不少IOS和Android的API

2.組件設計問題

Android和IOS一些設計組件是不共通的，這意味着，本來在React上只返回一個組件的狀況下，RN中你可能須要判斷平臺分別返回兩個版本的組件，爲何要這樣？ 由於對於許多組件，兩個平臺的風格差別實在太大，只能分而治之。

3.靜態資源問題

RN應用和普通Web應用有一些天生的差異，RN應用是能夠植入預約的靜態資源的，也就是不須要通過任何一次請求，而均可以本地使用的靜態資源，而Web應用試圖使用這種資源則須要通過至少一次的網絡請求而且緩存，但仍有可能被用戶強清緩存等操做付之一炬。

這意味着，作性能優化時也許能夠從靜態資源入手了，我閱讀了如下文章後 探索 react native 首屏渲染最佳實踐

學習到了能夠經過靜態文件佔位圖優化RN首屏的新思路。固然，不少時候React和RN的優化思路也是共通的，例如

• 資源預先緩存
• 長列表延遲加載等等

4.標籤生效問題

• <div>不能用啦，要用<view>
• <p>標籤用不了啦,要用<Text>
• 沒有<img>了，取而代之的是<Image>
• 背景，能夠用ImageBackground這個組件
• 列表，不能用ul/li啦，用ListView組件吧兄弟
• 各類Input，不能用input標籤啦～ 要用對應的原生控件，好比TextInput、Picker、Switch、Slider

5.事件核心問題

Web開發中，點擊事件是核心，而在主攻移動端的RN中，觸摸事件的地位則大大加強，並且除此以外，還衍生了長按事件（JS中我記得只有雙擊事件沒有長按事件）

• onPressOut等等
• onLongPress 等等

6.CSS3屬性受限，動畫效果使用方式徹底變動

CSS/Animation我用不了了，由於CSS已經沒了了，底層是用bridge調原生的UI構建

7.虛擬DOM到虛擬View的演變

在React中，咱們使用虛擬DOM模擬現實中的DOM節點

在RN中，這個對象被換成了虛擬View,對應原平生臺中的視圖，由於RN中已經沒有DOM了

8.UI呈現的變化

（如下參考自： http://blog.ilibrary.me/2016/12/25/react-native-internal）

UI的描述和呈現分離開了。

1. html文本描述了頁面應該有哪些功能，css告訴瀏覽器該長什麼樣。
2. 瀏覽器引擎經過解析html和css，翻譯成一些列的預約義UI控件，
3. 而後UI控件去調用操做系統繪圖指令去繪製圖像展示給用戶。
4. Javascript無關緊要，主要用於html裏面一些用戶事件響應，DOM操做、異步網絡請求和一些簡單的計算。

在react native 裏面，1和2是不變的，也是用html語言描述頁面有哪些功能，而後stylesheet告訴瀏覽器引擎每一個控件應該長什麼樣。而且和瀏覽器用的是同一個引擎。
在步驟3裏面UI控件再也不是瀏覽器內置的控件，而是react native本身實現的一套UI控件（兩套，android一套，ios一套），這個切換是在MessageQueque中進行的，而且還能夠發現，他們tag也是不同的。參考連接：http://blog.ilibrary.me/2016/12/25/react-native-internal

 

RN大觀園

1. IOS9只支持https，以http加載網絡圖片資源是無效的
2. React-native內置babel轉換器和ES6的polypill
3. RN使用的引擎是safari的引擎而咱們通常調試的時候用的是Chrome的V8引擎
4. 遇到頻繁修改屬性的場景，爲了不影響性能，建議使用setNativeProp直接修改屬性，而不是走setState的流程
5. 測試元素和包裹容器的距離，在普通場景中咱們可能會考慮scrolltop，offsetTop等一堆屬性，在RN中能夠經過一個方法，叫measure和measureLayOut，能分別測以某個元素爲參考點的相對位置和絕對位置
6. RN相對於普通web應用，增長了一個屬性叫hsl，能夠指定：色度-飽和度-亮度，是否是感受和rgba很相似的做用呀
7. 若是訪問的一些API，可是RN平臺暫時沒有作封裝，就須要本身用Object-C或者Android實現
8. 數據庫： RN是移動端應用，那不就意味着能夠用Android等的數據庫或者文件系統了嗎？ 在RN中這彷佛被封裝成了AsyncStroage,若是以爲API還不能知足的話，能夠用社區裏的一個高性能的RN庫——realm
9. 後臺任務能夠很方便的用了，就像web-worker同樣
10. 編寫跨平臺代碼時候，RN專門提供了Platform對
11. Plaform.OS: 返回平臺名稱，好比iOS或者android

• Plaform.Version: 返回版本
• Plaform.select: 方法，接收一個對象，能夠分別指定ios和android環境下的返回值，酌情返回

     12.導航有提供專門的模塊：好比react-navigation和react-native-navigation

     13.動畫要用Animated控件，不能本身寫CSS3的動畫屬性了，好比Animation和transition