React 回憶錄（三）使用 React 渲染介面

libinfs發表於2018-07-17
React

Hi 各位，歡迎來到 React 回憶錄！? 在上一章中，我介紹了 React 框架的“五大特點”：虛擬DOM，元件化，宣告式程式碼，單向資料流和純粹的 JavaScript 語法。在本章中，我們將談到 React 是如何渲染 UI 的，以及在這個過程中所表現出的 元件化 思想。

01. React 渲染介面的方式

在 React 等大型前端框架出現之前，我們渲染 UI 元素的方式是使用字串模板。而在 React 中，我們通過使用JavaScript 物件來渲染 UI 元素。

在上一章我們提到過，React 為了節省頻繁操作 DOM 所耗費的前端效能，提出了虛擬DOM的概念，在這裡我們所建立的 JavaScript 物件即是用來描述“頁面看起來是什麼樣子”的虛擬DOM節點。“虛擬DOM”是如何最終轉化為“真實DOM“並展現在瀏覽器中的呢？這裡面的複雜工作（操作 DOM 樹，新增節點）由 React 完成。

讓我們先看看如何通過一個 JavaScript 物件建立一個虛擬的DOM節點（即 React 元素）：

// 為了建立一個 React 元素，我們需要使用 React.createElement API
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
複製程式碼

該 API 最終會返回一個大致如下格式的 JavaScript 物件：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};
複製程式碼

React 會為這個 JavaScript 物件在生成的虛擬DOM樹上找到一席之地，並最終和瀏覽器中的真實 DOM 樹合併，渲染檢視。

然而在實際開發中，你幾乎不會使用到 React.createElement API，而是像下方這樣建立 React 元素：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
複製程式碼

這種建立方式是通過一種叫做 JSX 的 JavaScript 語法擴充套件實現的，而對於 JSX 的概念在這裡我就不再進一步闡述了，你大可以將它理解為一種簡潔，高效建立 React 元素的語法糖，用來更加優雅的構建整個應用的虛擬 DOM。

值得一提的是，JSX 並不是 React 框架的一部分（這源於 React 程式碼組織上儘量分而治之的哲學），因此 React 並不像負責合併虛擬DOM與真實DOM那樣，負責將由 JSX 語法寫成的程式碼轉化為使用了 React.createElement API 的 JavaScript 物件。

那誰來做這件事呢？答案是 Babel。而通常，我們使用 webpack 來打包我們的 JavaScript程式碼並輸送至 Babel 進行轉譯。現在你明白了，為什麼 React，webpack和Babel總是像連體嬰兒一樣出現在一起。

到目前為止，我們已經知道如何建立 React 元素了，但實際上我們只是“建立“而已，離元素被真正展現在瀏覽器上，還查了關鍵的一步”渲染“。

在這裡我們加快腳步，想要將之前建立好的 React 元素渲染出來，我們需要使用如下程式碼：

<div id="root"></div>

const element = <h1>Hello, world</h1>;

// 使用 ReactDOM.render API
ReactDOM.render(
  element,
  document.getElementById('root')
);
複製程式碼

沒錯，id 為 root 的 DOM元素將會成為整個虛擬DOM樹的根節點。至此，我們已經掌握了把 React 元素轉換為虛擬DOM節點，再在瀏覽器上渲染出該元素的整個流程。然而，只是能夠使用 React 渲染視覺元素還遠遠談不上發揮了 React 的價值。別忘了 React 是作為大型前端框架存在的（雖然相較於其他大型前端框架，它的元件並不完備），React 的真正價值在於：使用 React 元素簡潔，高效的實現各種複雜的業務邏輯。

如何做到這一點呢？答案是使用React 元件。

02. React 元件

React 元件不僅可以使我們有能力打包一堆視覺元素而且還可以使我們有能力打包一系列相對應的互動行為。可以說：React 元件是構成 React 應用的基石。

那什麼是 React 元件呢？你可以想象 React 元件就像是一個工廠，它接收一些列被稱為屬性的物料，最終生產（返回）React 元素/元件。

讓我們換個角度說，React 元件本質上就是一個 JavaScript 函式，它接收一系列引數，返回 React 元素/元件。讓我們看看它是被如何書寫的：

import React form 'react'
import ReactDOM form 'react-dom'

function Button(props) {
    return <button>{props.buttonName}</button>
}
複製程式碼

看到了嗎，React 元件完全符合之前我們提到過的元件化思想，接收引數，返回UI元素。

以元件化的角度思考構建 React 應用是一個非常棒的想法，因為元件化就意味著模組化與可重用性。元件類就像是一個工廠生產元件的例項，這些元件類完全符合”單一響應原則“與”DOT“原則。

在 React 的官方文件中，大量的 React API 是關於元件的。因此元件是 React 非常重要的一個概念，從本質上說，元件是 React 給予我們的主要的封裝單元。通過一個個元件，我們能像搭積木一樣快速搭起一個擁有複雜互動邏輯和視覺介面的大型應用，並且應用中的每個視覺單元又擁有著非常清晰的責任。

希望到這裡你能體會到 React 在構建大型應用時的價值了，它使我們能夠關注於應用中的一小部分，而不會無意中影響到應用的其餘部分（即每個元件都符合了”高內聚，低耦合“的原則）。使用 React，我們更容易寫出清晰，優雅的程式碼。

03. 小結

最後，讓我們再次總結在 React 中使用元件渲染介面的兩點優勢：

  1. 易於重用：我們可以在任何時間地點呼叫一個元件；
  2. 方便定製：通過給予元件不同屬性，我們可以獲得不同的 UI 元素；

通過這一章的介紹，希望各位有所收穫，如果有任何問題或建議，也歡迎各位在評論區內留言，下一章見 ?

PS：?如果你對該專題感興趣，別忘了訂閱本專欄，確保及時收到更新通知。記得點選下方?的各個按鈕，讓我知道你認可我的付出，這是激勵我持續產出的動力和源泉 ?。

下個章節見 ? ? ?！

相關文章