React 回憶錄（三）使用 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：🔊若是你對該專題感興趣，別忘了訂閱本專欄，確保及時收到更新通知。記得點擊下方👇的各個按鈕，讓我知道你承認個人付出，這是激勵我持續產出的動力和源泉 😎。

下個章節見 🎉 🙌 👋！