IT有得聊”是機械工業出版社旗下IT專業資訊和服務平臺，致力於幫助讀者在廣義的IT領域裡，掌握更專業、實用的知識與技能，快速提升職場競爭力。 點擊藍色微信名可快速關注我們！
英文：Linton Ye 譯文：鄭豐彧
今天我們將介紹 下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 開發的利器，其次它不涉及任何其他領域。
實際上，你無法單獨使用 React 開發出一個完整的應用。例如，你需要 CSS 來寫樣式，你需要 webpack 來打包，你需要 firebase 來做數據持久化，等等。
“Web Browser” 工作室的實際景象要你比之前所見到的忙碌得多。
這在 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 的創建者們所倡導的: “學習一次，隨處編寫”。
總結
好了，到目前為止，我們已經介紹了不少內容。我們瞭解了一些 React 的歷史以及 React Native 的組成。作為一個完整的平臺，React Native 包含開發原生應用所需的一切，並且它使用的是 JavaScript 語言和 React 範式。React Native 現在支持多個平臺，其中包括 iOS、Android、Windows、macOS、Sketch.app ，甚至還有 VR 。“學習一次，隨處編寫”！
一本小白也能讀懂的編程書
作者：納德·達比（Nader Dabit）
推薦理由：本書的作者Nader Dabit 是AWS Mobile 開發人員、React Native Training 創始人和React Native Radio 播客主持人。
旨在幫助iOS、Android 和Web 開發人員學習使用React Native 框架，構建高質量的iOS 和Android 應用程序。書中介紹了React Native 入門基礎知識，重點關注能夠解決實際問題的實戰技巧，深入探討樣式、導航、動畫、API、數據架構、代碼重用等內容。書中涉及的概念和技巧都附有簡短示例和代碼清單，讀者可以在線獲得源代碼。
閱讀更多 IT有得聊 的文章
