React已迅速成為制作前端應(yīng)用程序最流行的方式之一，它徹底改變了web應(yīng)用程序的開發(fā)方式。React不是一個MVC框架；而是一個“只查看”的庫。React中的前端開發(fā)圍繞著React生態(tài)系統(tǒng)，而不僅僅是核心元素，最終消除了不必要的復(fù)雜性。
React生態(tài)系統(tǒng)
從技術(shù)上講，開發(fā)人員可以通過附加庫擴(kuò)展核心React庫的功能。將React與這些庫一起使用形成React生態(tài)系統(tǒng)。例如，Redux用于狀態(tài)管理，React Router用于路由，Axios用于促進(jìn)API交互。成千上萬這樣的庫是React生態(tài)系統(tǒng)的一部分。React不使用模板，相反，它使用組件。
React使用組件
React被稱為構(gòu)建UI的最佳庫是有原因的。它構(gòu)建用戶界面的方式是獨特的，但又是可接近的。React.js 將UI分解為獨立的、可重用的部分和獨立的組件。這就是如何在ES6中定義組件“Welcome”。
此外，在React中構(gòu)建應(yīng)用程序時，你不必寫下每個組件。React生態(tài)系統(tǒng)中有許多可用的組件庫：React Material-UI、React-Bootstrap和React Belle。
所有這些令人敬畏的UI提示可能會讓你想，‘難道它們不會因為大量的DOM操作而使最終應(yīng)用程序的性能停滯不前嗎？’這是一個有效的論點。注意：DOM元素構(gòu)成用戶看到的應(yīng)用程序的一部分。
虛擬DOM
無論客戶端平臺和JavaScript引擎有多快，廣泛的DOM操作都是web應(yīng)用程序性能的已知瓶頸。DOM有一個樹狀結(jié)構(gòu)，頂層的簡單更改可能需要一些時間來反映底層，這可能會延遲用戶界面響應(yīng)，并最終增加用戶體驗的障礙。
幸運的是，React在用戶層和實際DOM之間的虛擬DOM層解決了這個問題。虛擬DOM是DOM的虛擬表示，它保留在內(nèi)存中，而不是用戶的屏幕中。于是問題出現(xiàn)了，用戶的屏幕上顯示了什么？
注意：虛擬DOM由于其在Angular的缺失而引人注目。
算法跟蹤在虛擬DOM上所做的更改，并確定哪些更改必須對真實DOM以及用戶屏幕進(jìn)行更改。假設(shè)應(yīng)用程序包含幾個具有自己的邏輯和呈現(xiàn)的React組件。由于React基本上是JavaScript，因此其中一個組件中的單個更改將操縱整個DOM，如果頻繁發(fā)生，可能會影響性能，如我前面所述。
這就是虛擬DOM的用武之地。它吸收對DOM的任何更改并將其保存在內(nèi)存中。然后，該算法檢測在哪個組件上進(jìn)行了更改，并更新DOM的該部分。此更改將反映在用戶屏幕上，而不會干擾其他組件。
在React應(yīng)用程序中，只有組件發(fā)生更改。這意味著無論用戶交互如何，頁面都保持不變。那么，如何才能讓搜索引擎發(fā)現(xiàn)該頁面呢？如果你想往前端的方向走，當(dāng)然不止React，還有更多的東西要學(xué)。
服務(wù)器端呈現(xiàn)
服務(wù)器端呈現(xiàn)React應(yīng)用程序以輸出HTML內(nèi)容，React需要服務(wù)器端呈現(xiàn)，以便在用戶或爬蟲點擊頁面時提供HTML響應(yīng)。我們在客戶端處理請求，并在服務(wù)器上呈現(xiàn)React組件。
一個主要問題是谷歌的爬蟲程序還不能呈現(xiàn)JavaScript。也就是說，爬蟲程序在呈現(xiàn)JavaScript代碼塊時將返回一個空白頁面。為了讓谷歌爬蟲能夠理解React頁面，我們需要React的服務(wù)器端呈現(xiàn)。
使用服務(wù)器端呈現(xiàn)，React將以與HTML和XML頁面相同的一致性呈現(xiàn)JavaScript頁面。更好的SEO將確保你的web應(yīng)用程序更容易被搜索引擎發(fā)現(xiàn)，并返回更好的價值。
JSX和最后的想法
JSX實際上是JavaScript的語法擴(kuò)展，與模板語言類似，它具有JavaScript的全部功能。React將關(guān)注點與組件分離，而不是將標(biāo)記和邏輯放在多帶帶的文件中。當(dāng)然，React不需要JSX，但在使用JavaScript的用戶界面時，它就像一個視覺輔助工具，它還使用有用的錯誤代碼和警告使調(diào)試更容易。
