什麼是React以及它實際上是如何工作的？

ReactJS是用於移動和Web應用程式開發的最流行的JavaScript庫之一。React由Facebook建立，包含一組可重用的JavaScript程式碼片段，用於構建稱為元件的使用者介面 (UI)。

重要的是要注意ReactJS不是JavaScript框架。那是因為它只負責渲染應用程式檢視層的元件。React是Angular和Vue等框架的替代品，它們都允許建立複雜的函式。

本文將探索React的功能，解釋它的工作原理，並介紹它對前端開發人員的好處。我們還將介紹ReactJS和React Native在Web和移動應用程式開發行業中的角色差異。

• React特性
• 為什麼要使用React？
• React是如何工作的？
• React Native怎麼樣？

React特性

React有一些核心特性使其從其他JavaScript庫中脫穎而出。以下部分將向您介紹這些功能，並解釋它們如何為移動和 Web 應用程式開發做出貢獻。

JSX

JSX是用於React元素建立的JavaScript語法擴充套件。開發人員使用它在JavaScript物件中嵌入HTML程式碼。由於JSX接受有效的JavaScript表示式和函式嵌入，它可以簡化複雜的程式碼結構。

讓我們看一個程式碼塊，它展示瞭如何在JSX中嵌入表示式：

const name = 'John Smith;
const element = h1>Hello, {name}/h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

在第二行中，我們通過將它放在花括號內來呼叫React元素內的name變數。

同時，ReactDOM.render()函式在文件物件模型 (DOM) 樹上渲染React元素，描述UI。

JSX還有助於對抗跨站點指令碼(XSS) 攻擊。預設情況下，React DOM在渲染之前將JSX中嵌入的值轉換為字串。因此，除非在應用程式中明確寫入，否則第三方無法通過使用者輸入注入額外程式碼。

在本文後面，我們將更詳細地討論JSX在React元件建立中的作用。

虛擬DOM

文件物件模型 (DOM) 以資料樹結構呈現網頁。ReactJS將虛擬DOM樹儲存在記憶體中。通過這樣做，React可以將更新應用到資料樹的特定部分，這比重新渲染整個DOM樹要快。

每當資料發生變化時，ReactJS都會生成一個新的Virtual DOM樹，並將其與之前的樹進行比較，以找到在真實DOM中實現變化的最快方法。這個過程被稱為diffing。

通過確保UI操作隻影響真實DOM樹的特定部分，渲染更新版本需要更少的時間和更少的資源。這種做法極大地有利於具有強烈使用者互動的大型專案。

元件和道具

ReactJS將UI劃分為獨立的可重用程式碼片段，稱為元件。React元件的工作方式類似於JavaScript函式，因為它們接受稱為屬性或道具的任意輸入。

返回的React元素決定了UI在客戶端的外觀。這是一個返回React元素的函式元件的示例：

function Welcome(props) {
  return h1>Hello, {props.name}/h1>;
}

可以根據需要擁有儘可能多的元件，而不會弄亂您的程式碼。

狀態管理

狀態是表示元件一部分的JavaScript物件。每當使用者與應用程式互動時，它都會發生變化，呈現新的UI以反映修改。

狀態管理是指管理React應用程式狀態的實踐。它包括將資料儲存在第三方狀態管理庫中，並在每次資料更改時觸發重新渲染過程。

狀態管理庫有助於React元件之間的通訊和資料共享。目前有幾個第三方狀態管理庫可用，但Redux和Recoil是最受歡迎的兩個。

Redux

Redux狀態管理庫有一個集中式儲存，它使應用程式的狀態樹保持可預測性。該庫還通過防止兩個元件同時更新應用程式的狀態來減少資料不一致。

Redux的架構支援錯誤日誌以便於除錯，並且具有嚴格的程式碼組織方式，簡化了維護。此外，它還具有大量外掛，並與所有UI層相容。

也就是說，Redux相當複雜，因此對於具有單個資料來源的小型應用程式來說不是最理想的。

Recoil

Recoil是Facebook釋出的JavaScript狀態管理庫。它使用稱為選擇器的純函式來計算來自稱為原子的可更新狀態單元的資料。多個元件可以訂閱同一個原子，從而共享一個狀態。

原子和選擇器的使用可以防止冗餘狀態，簡化程式碼，並消除對React和任何子元件的過度重新渲染。Recoil比Redux更適合初學者，因為它的核心概念更容易掌握。

程式化導航

程式化導航是指程式碼行建立重定向使用者的操作的例項。例如，登入和註冊操作以程式設計方式將使用者導航到新頁面。

React Router是React的路由標準庫，提供了多種在元件之間進行安全程式設計導航的方式，而無需使用者單擊連結。

使用重定向元件是程式設計導航的主要方法，history.push()是另一種方法。

簡而言之，React Router包將UI與URL同步，讓您無需依賴連結即可控制React應用程式的外觀。

為什麼要使用React？

全球數百家大公司，例如Netflix、Airbnb和American Express，都使用React來構建他們的Web應用程式。在接下來的部分中，我們將討論為什麼如此多的開發人員選擇ReactJS而不是其競爭對手的原因。

1. 易於使用

具有JavaScript知識的開發人員可以立即學習如何使用React，因為它依賴於純JavaScript和基於元件的方法。經過幾天的學習，就可以開始使用React開發基於Web的應用程式。

即使您不熟悉JavaScript，也有大量網站免費提供編碼課程。一旦您瞭解了JavaScript的基礎知識，請閱讀ReactJS以簡化前端開發過程。

2.支援可重用的Java元件

React允許您重用已開發到其他應用程式中的元件。由於ReactJS是開源的，因此可以預先構建元件，從而減少複雜Web應用程式的開發時間。

更重要的是，React允許在其他元件之間巢狀元件以建立複雜的功能，而不會使程式碼臃腫。由於每個元件都有自己的控制元件，因此很容易維護它們。

3. 更容易的元件編寫

由於JSX整合，編寫React元件更容易——使用者可以建立結合HTML排版和標籤的JavaScript物件。JSX還簡化了多函式渲染，在不降低應用程式功能的情況下保持程式碼精簡。

儘管JSX不是最流行的語法擴充套件，但它在特殊元件和動態應用程式開發中被證明是有效的。

React的官方命令列介面工具（CLI）稱為Create React App進一步簡化了單頁應用程式的開發。它具有帶有預配置工具的現代構建設定過程，非常適合學習ReactJS。

4. 高效能

如前所述，Virtual DOM允許ReactJS以最有效的方式更新DOM樹。通過將Virtual DOM儲存在記憶體中，React消除了可能會損害效能的過度重新渲染。

此外，React在元素之間的單向資料繫結簡化了除錯過程。對子元件所做的任何修改都不會影響父結構，從而降低了出錯的風險。

5. SEO友好

ReactJS可以通過提高效能來改進Web應用程式的搜尋引擎優化(SEO)。虛擬DOM實現是影響更快頁面速度的因素之一。

此外，React通過執行伺服器端渲染幫助搜尋引擎導航 Web應用程式。這解決了使用JavaScript的網站遇到的最重要的問題之一，因為搜尋引擎通常會發現它們具有挑戰性且抓取時間很長。

React是如何工作的？

使用React的最大優勢之一是您可以將JavaScript注入HTML程式碼。

使用者可以通過在React中宣告Element函式來建立DOM節點的表示。下面的程式碼包含HTML和JavaScript的組合：

React.createElement("div", { className: "red" }, "Children Text");
React.createElement(MyCounter, { count: 3 + 5 });

您可能已經注意到，上述HTML程式碼的語法與XML相似。也就是說，React沒有使用傳統的DOM類，而是使用了className。

JSX標籤有名稱、子標籤和屬性。數值和表示式必須寫在大括號內。JSX屬性中的引號代表字串，類似於JavaScript。

在大多數情況下，React是使用JSX而不是標準JavaScript編寫的，以簡化元件並保持程式碼簡潔。

下面是一個使用JSX編寫的React程式碼示例：

MyCounter count={3 + 5} />;
var GameScores = {player1: 2,player2: 5};
DashboardUnit data-index="2">
h1>Scores/h1>Scoreboard className="results" scores={GameScores} />
/DashboardUnit>;

以下是上述HTML標記的細分：

• MyCounter > 表示一個名為count的變數，它的值是一個數值表示式。
• GameScores是一個具有兩個prop-value對的物件字面量。
• DashboardUnit > 是在頁面上呈現的XML塊。
• score={GameScores}是分數屬性。它從前面定義的GameScores物件字面量中獲取其值。

React應用程式通常有一個根DOM節點。將元素渲染到DOM將改變頁面的使用者介面。

例如，以下程式碼通過將元素渲染到名為root的DOM節點中來在頁面上顯示“Hello World” 。

<div id="root">/div>
const element = h1>Hello, world/h1>;
ReactDOM.render(element, document.getElementById('root'));

每當React元件返回一個元素時，虛擬DOM都會更新真實DOM以匹配。

React Native怎麼樣？

React Native是一個基於React庫的開源JavaScript框架。開發人員使用它為iOS和Android建立跨平臺的React應用程式。

React Native使用原生應用程式程式設計介面 (API) 在Objective-C (iOS)或Java (Android) 中呈現移動UI元件。因此，開發人員可以建立特定於平臺的元件並跨多個平臺共享原始碼。

儘管有相似之處，但React Native與ReactJS不同。這是React Native和ReactJS的快速比較：

小結

ReactJS是一個強大的JavaScript庫，用於動態Web應用程式開發。它使JavaScript編碼更加簡單，並提高了應用程式的效能和SEO，以及其他好處。

ReactJS通過參與單向資料繫結來幫助簡化除錯過程並降低錯誤風險。

以下是您可能想要使用React的原因的回顧：

• 它易於使用和學習，線上提供大量編碼課程。
• 它支援可重用的元件，減少了開發時間。
• JSX使編碼和渲染元素變得更加容易。
• Virtual DOM消除了過多的重新渲染，確保了應用程式的高效能。
• React可幫助搜尋引擎抓取您的 Web 應用程式，從而提高其SEO。