React Native入門問題與解答


這些問題可能是在學習React Native之前會產生的,在這裡分享一些解答給有興趣投入的開發者參考。

React Native與React的關係是什麼?

React Native相當於React技術的移植,但執行環境與對象不同。

  • React應用主要是在瀏覽器上使用,React Native應用是在手機的Android/iOS上使用的。
  • React會渲染為HTML的DOM元素,React Native則是手機上的原生平台視圖或操作介面。

跟據React Native的官方說明,這是"學一次,到處寫(learn once, write anywhere)"的概念,有兩層涵義,第一是學過React後,用來寫React Native會很容易上手,因為語法與程式結構相同。第二是React Native目前至少可以跨iOS與Android雙行動平台,雖然沒有程式碼100%完全相同,最後也需要各自用平台工具進行編譯,但根據已有開發上架的App調查說明,可重覆使用的百分比可以高達80%~90%左右。

React Native也是利用手機上的WebView(網站視圖)來執行App?

不是。

React Native的App是Native(原生)的App,只是JavaScript程式碼是在一層JavaScriptCore上面執行。

註: 利用手機上的WebView(網頁視圖)上執行的手機App通常稱為Hybrid(混合) App,因為現在通常都是應用HTML5的多項新技術,所以也可稱為HTML5(或H5) App。

React Native為什麼不用V8 JS引擎,而要使用JavaScriptCore?

簡單來說,這是因為Apple限制iOS上只能使用自家出品的WebKit框架與JS引擎,不能使用其他的JS引擎。所以連帶在iOS上的Google Chrome瀏覽器都不是使用V8引擎。

React Native比Hybrid App(HTML5 App)的效能好?

不一定。

在簡單的應用上幾乎是相同的,但還是要看作什麼應用。不過基本上在使用者介面上的順暢程度,Hybrid App(HTML5 App)可能比不上React Native的App。

你可以參考這篇部落格Ionic Framework vs React Native中的實例影片,當然只是參考,這和作什麼程式,或是怎麼寫也有很大的影響成份。

React Native開發用的技術是什麼?

基本上有三個,類似於React在網站開發用的技術:

  • Javascript
  • 視圖元件(標記),類似於HTML
  • 樣式風格,類似於CSS

會使用React Native來作手機App的理由是什麼?

  • 跨平台: 可以指Android與iOS,或是指Web到手機App。減少開發/維護App的人力與時間
  • 學習與開發門檻: 對前端工程師而言,提供另一種選擇
  • 生態圈: 社群發展蓬勃資源多
  • 橋接或擴充性: 仍然可以橋接Obj-C、Swift(iOS)或是Java(Android)寫的應用
  • 相較於Hybrid App: 基本上接近於原生App,使用者體驗較好而且可再改善效能

用React Native開發手機App的缺點是什麼?

  • 不如Hybrid(HTML5 App)容易上手,Hybrid(HTML5 App)是直接用HTML/JS/CSS的技術來寫App
  • 仍然有一定的學習門檻,而且都是最新的技術
  • 框架與函式庫成熟度不足,社群仍需努力
  • 對於過舊的手機作業系統不支援(例如iOS7以下)
  • 雙平台的共通支援性仍有待加強,一般來說對iOS支援的比較好

用React Native寫出來的App可以上架到App Store或Google Market嗎?

可以,就像一般的App一樣。

有哪些實際的公司使用React Native開發的App?

Facebook本身用React Native已經作了很多套App,像Instagram、Facebook等等,你也可以看這份以React Native技術開發的App列表

其他還有像Airbnb、Wix.com、QQ、手機百度等等。

用React Native可以用來開發_____嗎?

如果你是想要開發遊戲、非常特殊應用…之類的,有可能是用到手機OS的低階或圖形運算的API,React Native並不適合,簡單的遊戲是還有可能的,也可以使用另外的解決方案,仍然需要用到Obj-C、Swift或是Java額外開發這些功能,然後與React Native的App整合。

React Native適合用來作什麼?提供資訊、與網站網路功能對應之類的APP,可能會比較合適。

React Native畢竟它還是個年輕的開放原始碼專案,各種資源與應用仍有待使用者社群考驗與發掘了。

用React Native開發App需要先學會Obj-C、Swift或是Java嗎?

不用。

React Native用的是JavaScript程式語言,而且很多都是最新的ES6(ES2015)語法。

當然,除非你要自己開發特別應用的元件,當然是需要Obj-C、Swift或是Java。

我可以在React Native開發時使用現成的其他JavaScript函式庫嗎?

可以,但是還要看函式庫是應用在何處。

如果這函式庫是限制只能用在網頁或Node.js(伺服器)上,就不能使用,因為React Native並不是在瀏覽器、WebView或Node.js上執行。

例如像React的一些元件都是只能用在網站上的,所以在React Native上不能直接使用。而像工具函式庫例如lodash、moment.js、Ramda、Redux等都可以在React Native上使用。

我可以在React Native整合目前已有的App(Obj-C、Swift或是Java寫的)嗎?

可以。

參考官網的Integration With Existing Apps說明。

開發React Native要用什麼特別的IDE或開發軟體嗎?

沒有。

一般用來撰寫JavaScript的編輯工具都可以,例如Atom, Sublime, Visual Studio Code, WebStorm, Vim...。不過還是建議選擇有一些具有相關輔助套件的,會讓你開發得比較輕鬆些。

另外,執行環境是用Node.js與npm,這是跨平台的。除錯則是使用Google Chrome。App編譯工具與模擬器的部份,iOS只能在macOS(Mac OS X)上用Xcode,Android則是跨平台。

React Native也受限於JavaScript是單執行緒的嗎?

是的。React Native應用在執行時,有三個主執行緒如下,JavaScript的確也是只在單執行緒上執行:

  • shadow queue: 版面(layout)在這裡
  • main thread: UIKit在這裡
  • JavaScript thread: 你的JS程式碼在這裡執行

這問題太深了一些,請參考BRIDGING IN REACT NATIVE

要學React Native要先學會哪些基礎?

假設如果你已經有用過或寫過JavaScript(jQuery)、HTML、CSS的話,以下是你該先進修的部份,不然學起來會很難過,千萬不要認為這些內容很少,實際上有可能比你之前學過的全部加起來還多,如果先學好對你會非常有幫助:

  • ES6(ES2015)的一些新的特性,例如箭頭函式、let/const、類別(Class)、Promise、展開運算符與其餘運算符、解構賦值、模組系統等等
  • 其他一些新的JavaScript新特性,例如Fetch
  • CSS3中有關Flexbox的內容
  • npm、webpack、eslint、babel、flowtype的使用方式

然後要先學會React,至少基礎的概念與開發流程都實際有作過。

React的概念與jQuery之類的完全不同,也不是用個網頁插入幾個CDN的JS檔案這樣用的,如果你前面的ES6(ES2015)的基礎沒打穩,我只能說你將會學得很沒力。

我還看到有很多人跳過React這段,直接用/學React Native,弄了半天還在研究JSX是什麼,順序錯亂掉了,不學React直接去學/用React Native只會讓你挫折感更重。

Redux(Flux)則是可以接在學習React之後學,不過它學習門檻更高,因為裡面有很多是應用最新的技術,而且這是用於React規模化的框架,小型的應用一開始用不到。Redux(Flux)的架構一樣可以用在React Native。

註: 不過,TypeScript與CoffeeScript這些超集語言是不需要額外再學的。