ReactJS - 架構

React 庫建立在堅實的基礎之上。它簡單、靈活且可擴充套件。正如我們之前學到的，React 是一個用於在 Web 應用中建立使用者介面的庫。React 的主要目的是讓開發者能夠使用純 JavaScript 建立使用者介面。通常，每個使用者介面庫都會引入一種新的模板語言（我們需要學習）來設計使用者介面，並提供在模板內或單獨編寫邏輯的選項。

React 並沒有引入新的模板語言，而是引入了以下三個簡單的概念：

React 元素

HTML DOM 的 JavaScript 表示形式。React 提供了一個 API，React.createElement 用於建立 React 元素。

JSX

一種用於設計使用者介面的 JavaScript 擴充套件。JSX 是一種基於 XML 的可擴充套件語言，支援 HTML 語法並進行少量修改。JSX 可以編譯成 React 元素並用於建立使用者介面。

React 元件

React 元件是 React 應用的主要構建塊。它使用 React 元素和 JSX 來設計其使用者介面。React 元件基本上是一個 JavaScript 類（擴充套件React.component 類）或純 JavaScript 函式。React 元件具有屬性、狀態管理、生命週期和事件處理程式。React 元件能夠執行簡單和高階邏輯。

讓我們在 React 元件章節中進一步學習元件。

React 應用的架構

React 庫只是一個 UI 庫，它不會強制使用任何特定的模式來編寫複雜的應用。開發者可以自由選擇他們喜歡的設計模式。React 社群提倡某些設計模式。其中一種模式是 Flux 模式。React 庫還提供了許多概念，如高階元件、上下文、渲染 Props、Refs 等，以編寫更好的程式碼。React Hooks 是一種不斷發展中的概念，用於在大專案中進行狀態管理。讓我們嘗試理解 React 應用的高階架構。

React 應用從單個根元件開始。
根元件使用一個或多個元件構建。
每個元件都可以巢狀到任何級別的其他元件中。
組合是 React 庫的核心概念之一。因此，每個元件都是透過組合較小的元件構建的，而不是從另一個元件繼承。
大多陣列件都是使用者介面元件。
React 應用可以包含用於特定目的的第三方元件，例如路由、動畫、狀態管理等。

React 應用的工作流程

在本節中，我們將透過建立和分析一個簡單的 React 應用來了解 React 應用的工作流程。

開啟命令提示符並轉到您的工作區。

cd /go/to/your/workspace

接下來，建立一個名為static_site 的資料夾，並將目錄更改為新建立的資料夾。

mkdir static_site 
cd static_site

示例

接下來，建立一個名為hello.html 的檔案，並編寫一個簡單的 React 應用。

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

接下來，使用 serve Web 伺服器提供服務。

serve ./hello.html

輸出

接下來，開啟您喜歡的瀏覽器。在位址列中輸入https://:5000，然後按 Enter 鍵。

讓我們分析程式碼並進行少量修改，以更好地理解 React 應用。

在這裡，我們使用了 React 庫提供的兩個 API。

React.createElement

用於建立 React 元素。它期望三個引數：

元素標籤
元素屬性（作為物件）
元素內容 - 它也可以包含巢狀的 React 元素

ReactDOM.render

用於將元素渲染到容器中。它期望兩個引數：

React 元素或 JSX
網頁的根元素

巢狀的 React 元素

由於React.createElement 允許巢狀 React 元素，因此讓我們新增巢狀元素，如下所示：

示例

<script language="JavaScript">
   element = React.createElement('div', {}, React.createElement('h1', {}, 'Hello React!'));
   ReactDOM.render(element, document.getElementById('react-app')); 
</script>

輸出

它將生成以下內容：

<div><h1> Hello React!</h1></div>

使用 JSX

接下來，讓我們完全刪除 React 元素並引入 JSX 語法，如下所示：

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
      <script type="text/babel"> 
         ReactDOM.render(
            <div><h1>Hello React!</h1></div>, 
            document.getElementById('react-app') 
         ); 
     </script> 
   </body> 
</html>

在這裡，我們包含了 babel 將 JSX 轉換為 JavaScript，並在 script 標籤中添加了type="text/babel"。

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<script type="text/babel"> 
   ... 
   ... 
</script>

接下來，執行應用並開啟瀏覽器。應用的輸出如下所示：

接下來，讓我們建立一個新的 React 元件 Greeting，然後嘗試在網頁中使用它。

<script type="text/babel"> 
   function Greeting() {
      return <div><h1>Hello JSX!</h1></div> 
   } 
   ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
</script>

結果相同，如下所示：

透過分析應用，我們可以視覺化 React 應用的工作流程，如下面的圖所示。

React 應用透過傳遞使用 React 元件建立的使用者介面（以 JSX 或 React 元素格式編寫）和容器來呼叫ReactDOM.render 方法，以渲染使用者介面。

ReactDOM.render 處理 JSX 或 React 元素併發出虛擬 DOM。

虛擬 DOM 將被合併並渲染到容器中。

React 應用的架構

列印頁面