[譯] 圖解 React

SangKa發表於2018-07-13
圖解React

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

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

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

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 嗎？

[譯] 圖解 React

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

我們來給 DOM 起個暱稱……就叫 Domo 如何？Domo 是 “Web Browser” 工作室的御用模特，他的工作就是在肖像畫家(也可能是數百萬個畫家)面前擺 pose 。

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

jQuery

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

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

[譯] 圖解 React

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

React

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

[譯] 圖解 React

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

[譯] 圖解 React

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

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

響應式 UI

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

[譯] 圖解 React

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

[譯] 圖解 React

還有更酷的，想象一下如果可以在要求過程中保留一個佔位符來表示相同姿勢的不同變體。React 就能做到！

這種方式的話，當畫家要求 Domo 穿戴不用的帽子作畫時，你不需要每次都告訴 Domo 戴哪頂帽子。你儘管坐在一旁讓他自己換帽子即可。

[譯] 圖解 React

這項技術正是 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 你想的肖像。React 將會紀錄草稿的所有細節，並在適當的時候展示給 Domo 看。

[譯] 圖解 React

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

[譯] 圖解 React

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

元件

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

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

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

回到 “Web Browser” 工作室，你將肖像的需求描述成一個個元件，React 將這些元件翻譯成 Domo 所能理解的內容。這將為你節省大量時間，因為你無需再一次次地重複描述需求中的通用部分。

[譯] 圖解 React

元件另外很酷的一點是如果你改變了某個元件，那麼所有使用此元件的地方都將自動更新。

[譯] 圖解 React

總結

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

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

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

相關文章