React Native 入門問題與解答

本篇部落格原本寫於 2016/10 ，此篇為 2020/7 修改版。

這些問題可能是在學習 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。

參考官方的Native UI Components這章節。

React Native 為什麼不用 V8 JS 引擎，而要使用 JavaScriptCore？

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

參考官方的JavaScript Environment這章節。

註：有兩個新的給Android的執行引擎專案，一個是react-native-v8，另一個是Hermes，三種引擎的Memory profiling比較。

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

不一定。在簡單的應用上幾乎是相同的，但還是要看作什麼應用。

不過基本上在使用者介面上的順暢程度，Hybrid (HTML5) App可能比不上 React Native 的 App。

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

React Native 比原生的 App 的效能好？

不一定。在簡單的應用上幾乎是相同的，但還是要看實際上作什麼應用。

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

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

JavaScript
視圖元件(標記)，類似於 HTML
排排和樣式風格，類似於 CSS

要如何開始學習 React Native 開發？

從 Expo 的輔助專案來開始學習 React Native 是最容易的，以下有三種方式說明如下：

最簡單：用Expo Snack線上直接寫，不用任何環境即可開始學習。
入門：用Expo建立專案，然後在自己的手機上裝模擬執行的App
進階：用React Native的命令列工具搭建環境，參考官方的環境建置。

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

最簡單的理由就是："減少開發/維護手機 App 的人力與時間"

以下的是個可以參考的理由：

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

註： Hybrid App 比這種 React Native 開發更快更容易，但差異就是上面最後一點。

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

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

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

可以，就像一般的手機 App 一樣。上架流程和一般的原生App是一樣的。

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

Facebook 本身用 React Native 已經作了很多套 App，像 Instagram、Facebook 等等，其他還有像 Airbnb、Wix.com、Uber、QQ、Skype、手機百度等等。

你也可以看這份以 React Native 技術開發的 App 列表。

用 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 程式碼在這裡執行

註：關於執行緒的問題有很多解新的解法，或是未來的發展，可以參考這篇中的討論：Parallel Multithreading + Workers，或是深入分析的文章：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 這些超集語言是不需要額外再學的

Hermes(愛馬仕) 是什麼？

Facebook在2019推出了新一代開放原始碼的JavaScript執行引擎。

Hermes 是一款輕量的 JavaScript 引擎，專門針對在 Android 上執行 React Native 進行了最佳化。對於許多應用程式，只需啟用 Hermes 即可縮短啟動時間、減少記憶體使用量並縮小應用程式大小。

官方說明原文：Hermes improves React Native performance by decreasing memory utilization, reducing download size, and decreasing the time it takes for the app to become usable or “time to interactive” (TTI).

參考連結：