2023-12-05|閱讀時間 ‧ 約 9 分鐘

React 運作原理 – React 白話文運動 05

前言

React 是開發網頁、手機前端最流行的 JavaScript 套件之一。React 由 Meta（前身為 Facebook）開發，使開發人員能夠創建可重覆使用的元件來完成前端頁面。

不過這邊要注意，嚴格說起來，React 並不是一個框架。這是因為它只負責呈現 UI 的元件。不過，React 為 Angular 和 Vue 等框架提供了另一種解決方式，使我們可以與它一起完成覆雜的前端頁面功能。

這篇文章將會解釋 React 的工作原理、特性，並講解前端開發者使用 React.js 的好處。

為什麼需要前端框架？

在回答這一個問題，不妨思考一個問題，為何我們需要使用前端框架？在網頁開發領域來說，前端框架確實是現代才有的工具，而不管是哪一個技術或是工具都是為了解決某個問題而被開發出來的。在舊有的網頁，HTML、CSS 甚至只需要一些些的 JavaScript 就可以完成一個靜態頁面。

然而隨著科技越來越發達，越來越多人使用網路後，網頁功能也越來越複雜，無論是會員註冊、登入、地圖功能、論壇發文留言功能…等等，早已不是一個簡單的網頁，就可以解決的。

因此開始有了前端工程師以及後端工程師，前端工程師負責 UI \ UX、視覺化介面、資料與狀態視覺化…等等。後端工程師負責資料處理、資料庫操作、伺服器管理、 API 開發…等等。

也因為頁面越來越複雜，不再是使用 JavaScript 或是 Jquery 就有辦法處理各種複雜的前端狀態，因此有了框架的誕生。

React、Vue、Angular 則是為了處理複雜的前端狀態而被發展出來的。

什麼是 React JavaScript ?

React 是一個功能強大的 JavaScript 套件，可通過模組化的方式創建前端介面。它通過引入宣告式和使用模組化的方法徹底改變了前端 UI 開發。

與 jQuery 中的 DOM 操作不同，React 使用 Virtual DOM 來優化性能。 React JavaScript（或 React.js）可處理覆雜的前端畫面，為開發者提供了一種結構化的高效方法。

React 運作原理？

React 引入了 JSX，這是一種語法糖，可無縫結合 JavaScript 和 HTML 程式碼。JSX 標簽類似於 XML，但有一些不同。

例如：React 使用 className 代替了 CSS 的傳統 class 屬性。數字值和表達式用大括號括起來，而引號表示字符串，這與 JavaScript 類似。

React 元素

React 可以透過其內建的函式，創建出各種 HTML 的 DOM（Document Object Model），因此我們先來複習一下基本的 HTML 語法。

<body>
    <h1>Hello World</h1>
    <ul>
        <li>dog</li>
        <li>cat</li>
    </ul>
</body>

由上面的 HTML 的結構可以知道 HTML 元素監視以樹狀結構相連的，且有一個根元素（root element）有兩個子元素（child element），第一個子元素為 h1，第二個子元素為 ul，並且如果端看 ul 清單來說的話，ul 本身也是一個父元素（parent element），裡面包含了兩個 li 的子元素。

我們是透過這些 DOM 來讓瀏覽器知道我們的頁面長什麼樣子的，因此 React 的概念也是如此，透過 React 開發的函數，建立這些元素，再將這些元素組合起來變成一個大型的 HTML，並且顯示頁面。

React DOM

當我們在創建一個元素後，我們需要將創建完成的 DOM 呈現在頁面中，我們稱這個動作為渲染（Render）。我們可以使用 ReactDOM 內建的 render 將我們已創建的 React 元素渲染（Render）至瀏覽器中。

const dish = React.createElement("h1", "Hello World");
ReactDOM.render(dish, document.getElementById("root"));

透過以上的JavaScript程式碼，會先建立一個HTML元素如下，並且將這個元素傳入HTML裡面。

<div id="root">
    <h1>Hello World</h1>
</div>

當然上面是單一比較簡單的 DOM，這邊也提供一個 ReactDOM 中，render list 方式建立的 HTML 範例。

const hello = React.createElement("h1", "Hello")
const world = React.createElement("h1", "World")

ReactDOM.render([hello, world], document.getElementById("root"))

為什麽使用 React.js？

全球數百家大公司，都在使用 React 製作自己的系統，以下也會簡單介紹使用React 的優點。

易於使用

通常具有 JavaScript 技術的 Web 開發工程師可以快速學會如何使用 React，因為它依賴於 Pure JavaScript 並也有模組化以及物件導向的概念，因此上手難度也會相對較低。

如果需要進一步學習 JavaScript，許多網站都提供免費的教學，可以先了解 JavaScript 的基礎知識後，再閱讀 React，以簡化前端開發流程。

可重用元件

React 可讓您重覆使用為其他應用程式的元件。舉例來說：如果開發了某一個頁面的表單，其他頁面如果需要使用，可以直接使用該表單的元件，不需要再開發一次。

此外，React 還可以在其他元件中繼續使用更小型的元件，以完成複雜的功能，而不會有太多肥大的程式碼。每個 React 元件都有自己的狀態，因此可以更容易維護。

簡易的前端元件實作

React 可將 JavaScript 對象與 HTML 語法和標記相結合。還可以寫元件，並通過 JSX （之後的章節也會繼續講解此名詞），將 React 添加到現有的 HTML 頁面。 JSX 簡化了多功能呈現，也能保持程式碼簡潔，又不會限制系統的功能。

高性能

Virtual Dom 允許 React 快速地更新 DOM Tree。通過在特別的機制以及演算法，React 可以避免過多的重新渲染，以免影響性能。

搜索引擎優化

React 可通過提高性能和縮短 JavaScript 程式碼加載時間來改善加在時間，近一步搜索引擎優化（SEO）。Virtual DOM 的實現有助於加快頁面速度。

它還能通過 Server Side 優化 SEO。解決了純 JavaScript 網站所面臨的挑戰之一，因為搜索引擎通常會發現這些網站難以抓取且耗時較長。

結語

這一篇正式進入了 React 世界，講解了 React 運行的原理，包含是如何透過JavaScript 產生 HTML DOM，變成一個頁面的。

React 團隊的不斷改進使 React 更容易使用，能與各種技術結合，包括 Bootstrap、Tailwind CSS、Axios、Redux 和 Firebase。

在 Node.js 和 NGINX 的協助下，在 VPS 上部署 React 應用程序也很簡單。

如果有任何建議與疑問也歡迎留言！

如果喜歡此系列文章，請不吝於按下喜歡及分享，讓更多人看到唷～

備註

目前文章已移至 React 運作原理 – React 白話文運動 05

未來文章一併更新於此網站 Hogan.B Lab

並且包含多語系 繁體中文、英文、日文、簡體中文

觀看分類：React 白話文運動、其他系列

React 白話文運動系列

JavaScript 高階函式 – React 白話文運動 04

JavaScript Async Await – React 白話文運動 03

JavaScript ES6 Object – React 白話文運動 02

JavaScript ES6 – React 白話文運動 01

分享至

成為作者繼續創作的動力吧！

React 白話文運動

追蹤

React 運作原理 – React 白話文運動 05

前言

為什麼需要前端框架？

什麼是 React JavaScript ?

React 運作原理？

React 元素

React DOM

為什麽使用 React.js？

易於使用

可重用元件

簡易的前端元件實作

高性能

搜索引擎優化

結語

備註

React 白話文運動系列

作者的相關文章

Hogan｜軟體工程師沙龍的其他內容

你可能也想看

發表回應

React 運作原理 – React 白話文運動 05

前言

為什麼需要前端框架？

什麼是 React JavaScript ?

React 運作原理？

React 元素

React DOM

為什麽使用 React.js？

易於使用

可重用元件

簡易的前端元件實作

高性能

搜索引擎優化

結語

備註

React 白話文運動系列

作者的相關文章

Hogan｜軟體工程師沙龍 的其他內容

你可能也想看

發表回應

Hogan｜軟體工程師沙龍的其他內容