首頁 >web前端 >js教程 >react的使用： React如何渲染UI

react的使用： React如何渲染UI

不言原創: 2018-07-20 10:37:211624瀏覽

這篇文章跟大家介紹的內容是關於react的使用： 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 元素渲染出來，我們需要使用以下程式碼：

<p id="root"></p>

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 中使用元件渲染介面的兩點優勢：

##易於重複使用：我們可以在任何時間地點呼叫一個元件；
方便自訂：透過給予元件不同屬性，我們可以得到不同的UI 元素；

react的使用： React如何渲染UI

01. React 渲染介面的方式

02. React 元件

03. 小結

相關文章