[譯] 圖解 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 是開發原生應用的最佳方式之一。

我鼓勵你回到學習目標那裏，去試試本身是否可以回答出所有問題。若是你有任何問題或意見，請給我留言!