[譯] 圖解 React Native

原文連結: learnreact.design/2017/06/20/…

喜歡理由: 插圖大愛 生動有趣 視角獨到

特別鳴謝: 原作者 Linton Ye 的傾情校對

系列部落格: 用通俗的語言和塗鴉來解釋 React 術語

• 圖解 React
• 圖解 React Native (本文)
• 元件、Props 和 State
• 深入理解 Props 和 State (待翻譯)
• React Native vs. Cordova、PhoneGap、Ionic，等等 (待翻譯)

在上一篇文章中，我們介紹了什麼是 React 以及是什麼使得它如此特別。今天我們將介紹 React Native: 它是做什麼的，它出自何處，它和 React 有哪些不同之處，以及它為何如此令人振奮。

學習目標

當你讀完本文後，希望你能重新回到這裡，並能夠輕鬆回答以下問題:

• 什麼是 React Native ？為什麼它的名字中有 “Native” 字樣？
• 為什麼 React Native 如此之酷？
• 我們可以分別使用 React Native 和 React 來開發什麼？
• 為什麼會出現 ReactDOM ？它是做什麼的？
• React 渲染器 ( renderer )是用來做什麼的？
• React Sketch.app 工作原理是什麼？
• ReactVR 的工作原理是什麼？
• 什麼是 ReactJS ？React.js 又是什麼？

不僅僅是 Web

學完上一篇文章的你現在腦海中的畫面應該是這樣的:

你也知道，React 是在 Web 上開發使用者介面的利器。使用 React 來開發 UI 的話，就能夠描述你想要什麼，而不是告訴 UI 如何更新 (響應式 UI)，還可以在可重用元件中組織程式碼，並建立高效能使用者介面，而無需擔心DOM超慢的速度 (虛擬 DOM)。越來越多的開發者選擇 React 是因為它可以使得開發者更專注於上層業務，而不是底層 DOM 更新的細節。我們將這種開發 UI 的方式稱之為 React 正規化。正規化基本上就是你思考一個問題的方式，以及這個問題的描述方式和解決方案。

對於 Web 應用來說這無疑很棒。那對於其他平臺呢，比如 iOS 和 安卓？如果能將 React 正規化應用於原生應用的開發，豈不是很棒？

在某種程度上來說，移動端的工作方式與 Web 端是相同的。比方說，有一個模特(樹人)，還有一個根據模特來建立視覺元素的藝術家。沒什麼可驚訝的，構建原生應用 UI 的傳統方式就是直接操縱樹人並告訴他如何更新(直接跟樹人交談)。這與在 Web 瀏覽器中直接操縱 DOM 有類似的缺點。React 絕對有助於解決此類問題。

除了相似之處外，移動端還有與 Web 端不同的地方，不同系統之間都是完全不同的。在過去，要開發原生應用的話，開發者需要學習特定的語言和平臺工具鏈。

這有點像在國外的工作室上班，員工需要說不同的語言。你需要精通所有語言才能跟所有模特進行交流。這聽上去就很麻煩，你說是吧？

所以，如果想要你開發出的原生應用能執行在 iOS 和安卓兩個平臺上的話，你需要建立兩套完全分離的程式碼庫。同樣的業務邏輯需要寫兩遍。開發應用既困難，成本又高，從長期的維護來看的話更是如此。

這正是 React Native 誕生的原因。我們來一起看看它是如何將開發過程大大簡化的。

React Native

渲染器 ( renderer ) 和全新的 React

對於 Web 應用來說，React 負責啟用 React 正規化 (管理響應式 UI、元件和虛擬 DOM)，以及實際更新瀏覽器中的 DOM (與 Domo 交流)。當 DOM 是唯一需要互動的物件時，React 可以輕鬆處理好這兩項任務。

但是，對於原生應用的話，當需要管理不同平臺上的各種“樹人”時，事情就變得有挑戰了。如果我們將更多的重擔壓在 React 肩上的話，那我們可憐的超級英雄將會為此抓狂。

為了解決此問題，React 建立者們將原來的 React 拆分成兩部分。第一部分是全新的 React ，它只負責啟用 React 正規化。第二部分叫做 ReactDOM ，它唯一的任務就是與瀏覽器中的 DOM 進行互動。因為 ReactDOM 負責更新 DOM ，而 DOM 又決定了瀏覽器渲染的內容，所以我們將 ReactDOM 稱之為渲染器。

想象一下，我們的超級英雄脫下了他的斗篷，並在上面灑了一些魔法之塵。

斗篷立刻就有了生命，併成為了超級英雄的小助手。從負責與 Domo 溝通的枷鎖中釋放後，React 現在可以專注於做他最擅長的事。

這種角色分離的理念非常之強大。現在我們只需要維護一個共享的核心庫，同時編寫全新的渲染器來適應新平臺。這種方式要比之前簡單多了。由於有了 iOS 和安卓渲染器的強力支撐，現在你可以只使用一種語言和相同的 React 正規化來同時為兩個平臺開發應用。

React 只需要專注於他擅長的領域即可。渲染器來負責溝通。

一個完整的平臺

React 的官網定義是: 用來開發使用者介面的 JavaScript 庫。它的含義有兩層: 首先它是 UI 開發的利器，其次它不涉及除 UI 開發以外的任何其他領域。

實際上，你無法單獨使用 React 開發出一個完整的應用。例如，你需要 CSS 來寫外觀樣式，你需要 webpack 來打包，你需要 Firebase 來做資料持久化，等等。

“網路瀏覽器” 工作室裡的實際景象要你比之前所見到的要忙碌得多。

這在 Web 開發環境下還好，因為 React 是一個 JavaScript 庫，所以它能自然地適應 Web 環境下的其他部件。這些部件要麼本身就是 JavaScript 庫，要麼能很容易地與 JavaScript 適配。畢竟 JavaScript 是 Web 上的標準語言。

但是，對於移動端來說就比較困難了，因為那裡需要支援多種語言和技術。這個時候，我們就需要包含一整套部件，而且這些部件的使用方法要跟 React 類似，至少是能用 JavaScript 來呼叫。這樣，React Native 誕生了。

相比於 Web 上的 React ，React Native 包括更多東西:

• 全新的 React 作為核心庫 (我們的超級英雄，只不過沒穿斗篷)
• iOS 和安卓的渲染器
• 將程式碼轉換成可安裝應用的工具
• 原生 UI 元件 (狀態列、列表等等)和動畫
• UI 的樣式和佈局工具箱 (flexbox)
• 構建大多數應用的基礎部分 (比如網路)
• 提供原生功能的部分，比如貼上板、加速計和儲存
• ...

我們說 React Native 本身是一個完整的平臺是因為它包含開發完整應用所需的一切。相比之下，原本的 React 只負責 Web UI ，你需要去自己引用其他部分才能建立出一個 Web 應用。

React Native 的組成

原生 UI

為什麼 React Native 的名字裡有 Native 字樣？這實際上是它的標誌性特徵: React Native 的內建 UI 是由原生 UI 元件組成的，這些元件表現良好，外觀/感覺一致，並非 WebView 中所包含的一些垃圾模擬。用 React Native 開發的應用與用像 Swift 和 Java 開發的原生應用放在一起，通常是難以區分的。

你也知道，像滾動加速、動畫、鍵盤行為和陰影這些細節，實際上在應用程式的使用者體驗中扮演了非常重要的角色。如果這些東西不能與你手機中其他應用保持統一的話，那麼使用者很快就會覺得不爽。

我原本的目的就是想在這裡解釋清楚 “native” 的真正含義以及為何 React Native 的效能更好。但我發現在幾次頭腦風暴之後，我的一整頁筆記很快就寫滿了。還是在後面的文章中再來單獨講它吧。

到目前為止，我只需要你記住原生 UI 是讓 React Native 大放異彩的原因之一。

看到這裡，你應該瞭解到 React Native 是一個完整的平臺，它可以讓你使用 JavaScript 來開發真正的原生應用，而且還是用 React 的路子來寫（React 正規化）。

React Sketch.app、ReactVR、React XYZ…

Airbnb 最近釋出了一款十分有趣的工具，叫做 React Sketch.app ，它可以將 React 程式碼轉換成 Sketch 裡的圖層。你能猜出它的工作原理嗎？

沒錯！從本質上來說，它就是使用了特殊渲染器的 React Native ，這個渲染器能與 Sketch 中的樹人進行交流！

因為 React Sketch.app 是基於 React Native 的，它也是一個完整的平臺，所以可以直接使用它來從遠端 API 來獲取資料並在 Sketch 中進行渲染。

與此同時，許多 React Native 的其他變種紛紛問世，用來支援在 Windows、 macOS、VR 等平臺上建立應用。

這意味著只要你掌握了 React ，就可以在大量的平臺上使用 JavaScript 來建立應用，而且對新平臺的支援還在不斷湧現。不同的平臺，同樣的思維模式。正如 React Native 的建立者們所倡導的: “一次學習，隨處編寫”。

動手時刻！

說了這麼多！你是否想在自己的手機上也嘗試一番？

我也很興奮！拿起你的手機跟我一起動起來！

1. 在手機上下載 Expo 應用。你可以點選這裡下載: iOS、安卓，或者在 App Store 中搜尋 “Expo” 。
2. 在電腦上開啟網頁: snack.expo.io/ 。
3. 在手機上啟動 Expo 應用並點選 “Scan QR Code” 。
4. 掃描電腦上顯示的二維碼。如果一些正常，你應該可以看見一條綠色的資訊 “Device connected” 。
5. 如果二維碼無法自動消失的話，可以點選頁面右上角的小叉關閉。關閉後應該可以看見程式碼編輯器。
6. 刪除編輯器中的所有程式碼，然後將此程式碼貼上進去。
7. 你在手機上看到了什麼？
8. 你可以隨意更改編輯器中的程式碼，然後立即在手機中檢視結果！

在後面的文章中我會對開發環境進行詳細地解釋。你暫時只需記住它就是 React Native 的 Codepen (在上篇文章中我曾使用它來展示示例 Domo 的帽子)。

如果你將 React Native 版本 和 React (Web) 版本進行對比的話，你會發現它們的程式碼十分相似，都是這樣的:

const Hat = ...

const Thinker = ...

// 下面的程式碼是 React Native 版本的
// Web 版本的話，只需將 “View” 替換成 “div”
const ThinkerWithHat = ({hat}) => (
  <View>
    <Thinker />
    <Hat type={hat}/>
  </View>
);

const HatSwitcher = ...

...
複製程式碼

“一次學習，隨處編寫”！還記得嗎？

什麼是 ReactJS ？什麼是 React.js ？

你可能無數次地聽到 ReactJS (或 React.js) ，我也是這麼叫的。實際上這並非官方名稱。自從誕生之日起，官方名稱一直都是 “React” ，從未改過。

因為一般 JavaScript 庫的名字都趨向於叫 “XyzJS” 或 “Xyz.js” ，React 也不例外，或許開發者們都已經習慣給庫的名稱加上 “JS" 或 “.js” 的字尾了。因為 React 最開始是作為 Web 庫的身份出現的，所以很多開發者都習慣於實用 ReactJS 或 React.js 來泛指 Web 上的 React ，即 React 和 ReactDOM 的集合。

按照慣例，當我提到 ReactJS 時，其實我想表達的也是 Web 上的 React 。

總結

好了，到目前為止，我們已經介紹了不少內容。我們瞭解了一些 React 的歷史以及 React Native 的組成。作為一個完整的平臺，React Native 包含開發原生應用所需的一切，並且它使用的是 JavaScript 語言和 React 正規化。React Native 現在支援多個平臺，其中包括 iOS、Android、Windows、macOS、Sketch.app ，甚至還有 VR 。“一次學習，隨處編寫”！

在下篇文章中，我們將介紹什麼是真正的原生應用，以及為何 React Native 是開發原生應用的最佳方式之一。

我鼓勵你回到學習目標那裡，去試試自己是否能夠回答出全部問題。如果你有任何問題或意見，請給我留言!