當(dāng)React開發(fā)者初次走進React-Native的世界

RN千機變

1.技術(shù)體系問題

RN和React共用一套抽象層，相對于前端，RN其實更接近Node的運行環(huán)境
ReactNative =React +IOS +Android
看RN文檔時，我會發(fā)現(xiàn)入門基礎(chǔ)那一塊介紹的都是React的內(nèi)容，進階篇則介紹了很多IOS和Android的API

2.組件設(shè)計問題


Android和IOS一些設(shè)計組件是不共通的，這意味著，原本在React上只返回一個組件的情況下，RN中你可能需要判斷平臺分別返回兩個版本的組件，為什么要這樣？
因為對于許多組件，兩個平臺的風(fēng)格差異實在太大，只能分而治之。

3.靜態(tài)資源問題


RN應(yīng)用和普通Web應(yīng)用有一些天生的差別，RN應(yīng)用是可以植入預(yù)定的靜態(tài)資源的，也就是不需要經(jīng)過任何一次請求，而都可以本地使用的靜態(tài)資源，而Web應(yīng)用試圖使用這種資源則需要經(jīng)過至少一次的網(wǎng)絡(luò)請求并且緩存，但仍有可能被用戶強清緩存等操作付之一炬。

這意味著，做性能優(yōu)化時也許可以從靜態(tài)資源入手了，我閱讀了以下文章后?探索 react native 首屏渲染最佳實踐
<https://link.zhihu.com/?target=http%3A//www.alloyteam.com/2016/03/best-practice-in-react-native/>

學(xué)習(xí)到了可以通過靜態(tài)文件占位圖優(yōu)化RN首屏的新思路。當(dāng)然，很多時候React和RN的優(yōu)化思路也是共通的，例如

* 資源預(yù)先緩存
* 長列表延遲加載等等
4.標(biāo)簽生效問題

* <div>不能用啦，要用<view>
* <p>標(biāo)簽用不了啦,要用<Text>
* 沒有<img>了，取而代之的是<Image>
* 背景，可以用ImageBackground這個組件
* 列表，不能用ul/li啦，用ListView組件吧兄弟
* 各種Input，不能用input標(biāo)簽啦～ 要用對應(yīng)的原生控件，比如TextInput、Picker、Switch、Slider
5.事件核心問題

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

* onPressOut等等
* onLongPress 等等
6.CSS3屬性受限，動畫效果使用方式完全變更

CSS/Animation我用不了了，因為CSS已經(jīng)沒了了，底層是用bridge調(diào)原生的UI構(gòu)建

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

在React中，我們使用虛擬DOM模擬現(xiàn)實中的DOM節(jié)點

在RN中，這個對象被換成了虛擬View,對應(yīng)原生平臺中的視圖，因為RN中已經(jīng)沒有DOM了

8.UI呈現(xiàn)的變化

（以下參考自：?http://blog.ilibrary.me/2016/12/25/react-native-internal）
<https://link.zhihu.com/?target=http%3A//blog.ilibrary.me/2016/12/25/react-native-internal%25EF%25BC%2589>

UI的描述和呈現(xiàn)分離開了。

* html文本描述了頁面應(yīng)該有哪些功能，css告訴瀏覽器該長什么樣。
* 瀏覽器引擎通過解析html和css，翻譯成一些列的預(yù)定義UI控件，
* 然后UI控件去調(diào)用操作系統(tǒng)繪圖指令去繪制圖像展現(xiàn)給用戶。
* Javascript可有可無，主要用于html里面一些用戶事件響應(yīng)，DOM操作、異步網(wǎng)絡(luò)請求和一些簡單的計算。 在react native
里面，1和2是不變的，也是用html語言描述頁面有哪些功能，然后stylesheet告訴瀏覽器引擎每個控件應(yīng)該長什么樣。并且和瀏覽器用的是同一個引擎。
在步驟3里面UI控件不再是瀏覽器內(nèi)置的控件，而是react
native自己實現(xiàn)的一套UI控件（兩套，android一套，ios一套），這個切換是在MessageQueque中進行的，并且還可以發(fā)現(xiàn)，他們tag也是不一樣的。參考鏈接：
http://blog.ilibrary.me/2016/12/25/react-native-internal
<https://link.zhihu.com/?target=http%3A//blog.ilibrary.me/2016/12/25/react-native-internal%25EF%25BC%2589>
?

RN大觀園

* IOS9只支持https，以http加載網(wǎng)絡(luò)圖片資源是無效的
* React-native內(nèi)置babel轉(zhuǎn)換器和ES6的polypill
* RN使用的引擎是safari的引擎而我們一般調(diào)試的時候用的是Chrome的V8引擎
* 遇到頻繁修改屬性的場景，為了避免影響性能，建議使用setNativeProp直接修改屬性，而不是走setState的流程
*
測試元素和包裹容器的距離，在普通場景中我們可能會考慮scrolltop，offsetTop等一堆屬性，在RN中可以通過一個方法，叫measure和measureLayOut，能分別測以某個元素為參考點的相對位置和絕對位置
* RN相對于普通web應(yīng)用，增加了一個屬性叫hsl，可以指定：色度-飽和度-亮度，是不是感覺和rgba很類似的作用呀
* 如果訪問的一些API，但是RN平臺暫時沒有做封裝，就需要自己用Object-C或者Android實現(xiàn)
* 數(shù)據(jù)庫： RN是移動端應(yīng)用，那不就意味著可以用Android等的數(shù)據(jù)庫或者文件系統(tǒng)了嗎？
在RN中這似乎被封裝成了AsyncStroage,如果覺得API還不能滿足的話，可以用社區(qū)里的一個高性能的RN庫——realm
* 后臺任務(wù)可以很方便的用了，就像web-worker一樣
* 編寫跨平臺代碼時候，RN專門提供了Platform對
* Plaform.OS: 返回平臺名稱，比如iOS或者android
* Plaform.Version: 返回版本
* Plaform.select <https://link.zhihu.com/?target=http%3A//Plaform.select>:
方法，接收一個對象，可以分別指定ios和android環(huán)境下的返回值，酌情返回
? ? ?12.導(dǎo)航有提供專門的模塊：比如react-navigation和react-native-navigation

? ? ?13.動畫要用Animated控件，不能自己寫CSS3的動畫屬性了，比如Animation和transition

• ? 上一篇： 優(yōu)秀工程師必備的一項技能，你解鎖了嗎？
• ? 下一篇：我是如何學(xué)習(xí)寫一個操作系統(tǒng)（四）：操作系統(tǒng)之系統(tǒng)調(diào)用