[譯] 圖解 React Native

SangKa發表於2018-07-23
圖解React Native

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

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

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

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

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

學習目標

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

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

不僅僅是 Web

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

[譯] 圖解 React Native

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

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

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

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

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

[譯] 圖解 React Native

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

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

React Native

渲染器 ( renderer ) 和全新的 React

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

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

[譯] 圖解 React Native

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

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

[譯] 圖解 React Native

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

[譯] 圖解 React Native

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

[譯] 圖解 React Native

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

一個完整的平臺

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

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

[譯] 圖解 React Native

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

這在 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

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 Native

React Sketch.app、ReactVR、React XYZ…

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

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

[譯] 圖解 React Native

因為 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 是開發原生應用的最佳方式之一。

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

相關文章