[譯] 圖解 React

原文連接: learnreact.design/2017/06/08/…

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

系列博客: 用通俗的語言和塗鴉來解釋 React 術語

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

React、ReactJS、React.js、React Native… 這些有些類似的名詞你最近聽過多少遍了？對於它們到底是什麼你是否感到困惑？

若是你是一名設計師，你所在的團隊使用(或正在考慮使用)的技術是 React ，或者你只是單純對 「React」 比較好奇的話，那麼本文就是爲你而準備的。

在文本中，我只使用樸實的語言和插圖來解釋 React 家族中的各類術語，並深刻探索到底是什麼使得 React 如此特別。本文中並不須要任何代碼知識即可閱讀。我但願你先熟悉一些概念，從而不至於在後面的學習過程當中感到絕望。若是後面須要溫故而知新的話，歡迎隨時回來閱讀。

準備好了嗎？咱們開始了！

學習目標

讀完本文後，但願你可以從新回到這裏，並可以輕鬆回答下列問題:

• 什麼是 DOM ？
• 什麼是 React ？它的哪些方面比較適合應用開發？
• React 與 jQuery 的不一樣之處？
• React 的核心概念是什麼？
• 什麼是響應式 UI ？
• 組件有哪些好處？

關於 Web 你須要瞭解的

咱們先來介紹一些你可能聽過不少年的術語。首先是 DOM 。

DOM

DOM 的全稱是 Document Object Model (文檔對象模型)。很簡單吧？它就是文檔對應的對象模型。

先暫時忘掉它的概念。咱們先來看看大名鼎鼎的 「Web Browser」 工做室！你能在下面的插圖中找到 DOM 嗎？

難道 DOM 是……一棵樹？對，就是一棵樹！奇怪的是，計算機相關的不少東西其實都像是一棵樹。

咱們來給 DOM 起個暱稱……就叫 Domo 如何？Domo 是 「Web Browser」 工做室的御用模特，他的工做就是在肖像畫家(也多是數百萬個畫家)面前擺 pose 。

肖像就是在瀏覽器中瀏覽網站時所看見的內容。開發者的職責就比如是導演，他來告訴 Domo 該穿什麼衣服，擺什麼 pose 。這將決定肖像最終畫出來的樣子。jQuery 和 React 都是庫，開發者使用它們做爲與 Domo 交流的工具。

jQuery

jQuery 是一個 JavaScript 庫，它可使開發者操縱 DOM 變得簡單得多。那他在 Domo 的故事中又扮演什麼角色呢？

它是一個工具，能夠簡化開發者與 Domo 溝通的過程，就像是一部手機。不管什麼時候何地均可以輕鬆呼叫 Domo 。相比於以前(使用原生 JavaScript)，它要方便得多，還記得在電話發明出來以前人跟人連簡單交流都要走得足夠近才行。

多年以來，咱們一直都在使用 jQuery 來直接與 Domo 溝通。是很方便，但並不是沒有問題。

React

下面請容許我來爲你介紹一個全新的超級英雄: React 。

使用 React 的話，開發者再也不須要直接跟 Domo 溝通。React 扮演在開發者和 Domo 之間的中間人角色。他下降了二者之間的溝通成本，同時簡化了肖像建立的過程。

React 使用了一些技術來解決 jQuery 和其餘工具中所存在的問題。下面是它的三項核心技術:

• 響應式 UI
• 虛擬 DOM
• 組件

響應式 UI

使用 jQuery 來更新 DOM 的話，你須要在適當的時機以正確的順序來指定要更改的元素。這等同於給 Domo 一步步講述頭怎麼擺、胳膊放在哪、腿什麼姿式，等等，而且每張肖像都是如此。

我靠，這聽起來太乏味了，而且容易出錯！爲何不直接告訴 Domo 你想要的效果，而不是如今這樣一步步地告訴他怎麼擺 pose ?

還有更酷的，想象一下若是能夠在要求過程當中保留一個佔位符來表示相同姿式的不一樣變體。React 就能作到！

這種方式的話，當畫家要求 Domo 穿戴不用的帽子做畫時，你不須要每次都告訴 Domo 戴哪頂帽子。你儘管坐在一旁讓他本身換帽子便可。

這項技術正是 React 名字的由來。使用 React 構建的 UI 是響應式的。做爲開發者，你只需編寫你想要的是什麼，React 本身會弄清楚該怎麼作。當數據變化時，UI 會相應地發生改變。你無需再關心 DOM 的更新，React 會自動幫你完成。響應式 UI 的理念大大地簡化了 UI 開發。

我知道我說過你不須要任何編碼知識，但只是爲了幫助你正確地看待問題，我仍是用代碼把它寫了出來。請查看下面的示例(嘗試更換 Domo 的帽子)):

Codepen 在線 Demo: Domo 的帽子 。

在後面的文章中我會來說解完整的代碼，但此時你只需簡單看一眼關鍵代碼便可:

const ThinkerWithHat = ({ hat }) => (
  <div> <Hat type={hat} /> <Thinker /> </div> ); 複製代碼

注意，你只需定義你想要的 (戴帽子的思想者)，並「鏈接」上數據 (「type = {hat}」) 。當數據發生變化時 (用戶選擇一頂帽子)，UI 會自動更新。

虛擬 DOM

jQuery 的另外一個問題就是它的運行速度。

做爲一個嚴苛的導演，你討厭等待。你想要肖像畫儘量快地完成。可是，Domo 和畫家都比較慢，並不是是樹瀨那種慢，只是 Domo 須要時間來換裝和擺 pose ，而且畫家做畫也須要時間。

更糟糕的是，在畫家完成一幅肖像畫以前，你沒法與 Domo 進行溝通。事實上，你什麼也作不了，除了等待。真浪費時間！

React 採用了另外一項技術來解決此問題。React 畫草稿的速度超級快。是當你告訴他你的要求後，他幾乎就能當即將草稿完成並準備畫下一張。如今就無需等待了！你能夠不停地告訴 React 你想的肖像。React 將會紀錄草稿的全部細節，並在適當的時候展現給 Domo 看。

更重要的一點是 React 十分聰明。他還會對全部草稿進行整理，拿掉重複的並確保 Domo 和畫家的工做量維持在最低水平。

這些草稿就是 「虛擬 DOM」 。虛擬 DOM 要比操縱 DOM 快得多得多。開發者絕大部分時間裏其實都是在操縱虛擬 DOM ，而不是直接操縱真實的 DOM 。React 負責管理 DOM 的這部分髒活。

組件

React 中第三項技術就是組件的概念。

組件應該很容易理解，由於咱們所生活的現實世界就是由組件組成的。咱們的車、房，甚至是身體都是由不一樣的組件所組合而成的。這些組件又是由一些更小的組件組合而成，以此類推，直至分解成原子。

若是你熟悉 Sketch (譯者注: 著名的設計軟件，與 PhotoShop 齊名) 的話，組件與 Sketch 中的 symbols 十分相似。構建 React 應用幾乎都是在同組件打交道: 尋找最適合的組件、融合兩個組件、在現有組件的基礎上建立新組件，等等。

回到 「Web Browser」 工做室，你將肖像的需求描述成一個個組件，React 將這些組件翻譯成 Domo 所能理解的內容。這將爲你節省大量時間，由於你無需再一次次地重複描述需求中的通用部分。

組件另外很酷的一點是若是你改變了某個組件，那麼全部使用此組件的地方都將自動更新。

總結

好了。但願你能學會一些 React 的知識。本質上，它仍是一個工具，用來幫助開發者操縱 DOM ，從而構建出頁面。響應式 UI 、虛擬 DOM 和組件是 React 的三大核心概念，正是有了它們才使得 React 如此特別。固然，React 還有一些其餘有趣的概念，好比單向數據流，我會在後面的文章中介紹。

在下一篇文章中，咱們將介紹 ReactJS、React Native 和 React Sketch.app 之間的關聯和區別。

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