React已迅速成為製作前端應用程式最流行的方式之一，它徹底改變了web應用程式的開發方式。React不是一個MVC框架；而是一個“只檢視”的庫。React中的前端開發圍繞著React生態系統，而不僅僅是核心元素，最終消除了不必要的複雜性。

React生態系統

從技術上講，開發人員可以通過附加庫擴充套件核心React庫的功能。將React與這些庫一起使用形成React生態系統。例如，Redux用於狀態管理，React Router用於路由，Axios用於促進API互動。成千上萬這樣的庫是React生態系統的一部分。React不使用模板，相反，它使用元件。

React使用元件

React被稱為構建UI的最佳庫是有原因的。它構建使用者介面的方式是獨特的，但又是可接近的。React.js 將UI分解為獨立的、可重用的部分和獨立的元件。這就是如何在ES6中定義元件“Welcome”。

此外，在React中構建應用程式時，你不必寫下每個元件。React生態系統中有許多可用的元件庫：React Material-UI、React-Bootstrap和React Belle。

所有這些令人敬畏的UI提示可能會讓你想，‘難道它們不會因為大量的DOM操作而使最終應用程式的效能停滯不前嗎？’這是一個有效的論點。注意：DOM元素構成使用者看到的應用程式的一部分。

虛擬DOM

無論客戶端平臺和JavaScript引擎有多快，廣泛的DOM操作都是web應用程式效能的已知瓶頸。DOM有一個樹狀結構，頂層的簡單更改可能需要一些時間來反映底層，這可能會延遲使用者介面響應，並最終增加使用者體驗的障礙。

幸運的是，React在使用者層和實際DOM之間的虛擬DOM層解決了這個問題。虛擬DOM是DOM的虛擬表示，它保留在記憶體中，而不是使用者的螢幕中。於是問題出現了，使用者的螢幕上顯示了什麼？

注意：虛擬DOM由於其在Angular的缺失而引人注目。

演算法跟蹤在虛擬DOM上所做的更改，並確定哪些更改必須對真實DOM以及使用者螢幕進行更改。假設應用程式包含幾個具有自己的邏輯和呈現的React元件。由於React基本上是JavaScript，因此其中一個元件中的單個更改將操縱整個DOM，如果頻繁發生，可能會影響效能，如我前面所述。

這就是虛擬DOM的用武之地。它吸收對DOM的任何更改並將其儲存在記憶體中。然後，該演算法檢測在哪個元件上進行了更改，並更新DOM的該部分。此更改將反映在使用者螢幕上，而不會干擾其他元件。

在React應用程式中，只有元件發生更改。這意味著無論使用者互動如何，頁面都保持不變。那麼，如何才能讓搜尋引擎發現該頁面呢？如果你想往前端的方向走，當然不止React，還有更多的東西要學。

伺服器端呈現

伺服器端呈現React應用程式以輸出HTML內容，React需要伺服器端呈現，以便在使用者或爬蟲點選頁面時提供HTML響應。我們在客戶端處理請求，並在伺服器上呈現React元件。

一個主要問題是谷歌的爬蟲程式還不能呈現JavaScript。也就是說，爬蟲程式在呈現JavaScript程式碼塊時將返回一個空白頁面。為了讓谷歌爬蟲能夠理解React頁面，我們需要React的伺服器端呈現。

使用伺服器端呈現，React將以與HTML和XML頁面相同的一致性呈現JavaScript頁面。更好的SEO將確保你的web應用程式更容易被搜尋引擎發現，並返回更好的價值。

JSX和最後的想法

JSX實際上是JavaScript的語法擴充套件，與模板語言類似，它具有JavaScript的全部功能。React將關注點與元件分離，而不是將標記和邏輯放在單獨的檔案中。當然，React不需要JSX，但在使用JavaScript的使用者介面時，它就像一個視覺輔助工具，它還使用有用的錯誤程式碼和警告使除錯更容易。