React Native雜談

bawn發表於2016-05-04

reactivecocoa一樣,react-native也很早就開始關注了,之所以到前段時間才學習,原因有幾點

  • 整個專案已經相對成熟
  • 國內外社群比較活躍
  • JavaScript和React學習成本並沒有想象的那麼高

對前兩個原因我覺得有必要詳細說明下,下面的內容我會用RN縮寫來代替react-native

RN的更新頻率很高,從目前來看差不多半個多月一個版本,從去年的3月底釋出一個版本0.1.0以來到現在的0.25.0為止一共釋出了多達82個版本,當然這裡麵包含很多rc版,可見facebook對RN的重視程度。

其實影響一個專案的流行程度很大一部分取決於其社群的活躍程度,RN社群現在這麼活躍也是得益於facebook的推廣,比如這兩年的F8大會、開源基於Atom的IDE:nuclide、第三方庫搜尋網站js.coach,以及自家的Facebook Ads ManagerFacebook Groups專案使用RN開發等,國內的也有不錯的交流平臺,比如react native中文社群。另外github上兩個RN學習資料、元件等的集合專案awesome-react-nativereact-native-guide都是不錯的指引。

我挑了幾個大家比較關心的問題一一說下自己的看法和理解

學習成本

我想對於學習一項新技能,都會首先去了解需要什麼基本條件。對於RN來說,需要的當然就是JavaScript和React基礎,但我並沒有刻意的去學習JavaScript和React,而是直接上手RN的同時瞭解和學習這兩樣。個人認為對於有開發經驗的程式設計師來說,語法並不是問題,即使對於JavaScript這種我認為很”隨便”的語言也是一樣,所以當你想學習RN但是沒有JavaScript和React經驗,根本不用擔心因為沒有基礎給你帶來多大的阻礙。

效能

關於效能問題有很多文章都分析過,我只說自己的主觀感受,對於iOS而言,只要不是非常複雜的頁面效能基本接近native,不過有時候你可能會在頁面切換的時候察覺到略微的卡頓。安卓可能是平臺或者RN優化的問題,目前效能表現不是非常理想,不過完全可以接受。這裡需要提一下,RN上的動畫會對效能造成一定的影響,所以並不建議使用大量動畫,官網也有文件闡述了效能問題以及出現的原因,如果遇到效能問題,強烈建議仔細閱讀。

實際應用

完全用RN來寫一個商業專案我想會遇到以下問題:

  • 多少會涉及到native平臺的程式碼,除非你的專案非常簡單,沒有涉及到第三方平臺(第三方分享、登入),沒有複雜的頁面,沒有複雜的處理,沒有複雜的動畫。舉個例子,比如APP有清除快取功能,那麼你必須得寫兩套程式碼,個人認為無論RN迭代到什麼程度,都還是有無法同時滿足兩個平臺的情況,這時候就需要依靠第三方庫了。
  • 平臺之間的UI差異,RN的理念是write once, run anywhere,所以你還是需要做好適配平臺的準備,這是幾乎也是無法避免的,另外可能相同的控制元件在不同平臺上的表現也有差異,我曾經遇到過TextInput控制元件的placeholder位置在兩個平臺下位置不同情況。
  • 動畫,前面我也提到動畫對於效能會存在一定的影響,而且複雜的動畫對於RN來說是非常困難的
  • RN本身的bug問題,這個問題或許在早期版本尤為突出,一旦遇到只能寄希望於RN團隊儘快解決,這種對於商業專案就較為麻煩了

另外學習過程中,我發現比較幾個有意思的地方:

  1. ListView在iOS層是基於UIScrollView封裝的
  2. Text在iOS層是UIView,並不是UILabel或者是UITextView,RN是通過Draw方法把文字繪製到檢視上的,因為這樣會有更好的效能表現,隨便提一下iPhone自帶的日曆應用的也是這樣的處理方式,詳情:簡書
  3. TouchableHighlight等在iOS層實際上是基於UIGestureRecognizer的封裝並不是UIButton

工具

對於初學者,MAC平臺推薦使用編輯器:Atom,配合前面提到的基於Atom的IDE:nuclide,再加上幾個Atom外掛:

如果覺得自動補全很有必要,可以試試這兩個外掛react-snippetsatom-react-native-autocomplete

筆記

在用國際版的印象筆記的同學,可以新增我的RN筆記本,我會不定期把總結寫到上面。

相關文章