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