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

最近因為業務需要，開始學習RN了，還是蠻有意思的吧（等待打臉ing），于是寫下這篇文章，記載React開發者剛開始開發RN時候的一些了解

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

我叫彭湖灣，請叫我胖灣