react同構(gòu)應(yīng)用的概念是什么

今天小編給大家分享一下react同構(gòu)應(yīng)用的概念是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

在react中，同構(gòu)應(yīng)用指的是在客戶端和服務(wù)端之間完整或者部分共享代碼的應(yīng)用，也可以被稱為通用JavaScript應(yīng)用；同構(gòu)應(yīng)用并不是不需要瀏覽器端渲染內(nèi)容，而是使服務(wù)端和瀏覽器端渲染達(dá)到一種平衡，在服務(wù)器上生成渲染內(nèi)容，讓用戶盡早看到有信息的頁面。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react同構(gòu)應(yīng)用

同構(gòu)應(yīng)用也被稱為通用`JavaScript`應(yīng)用，指的是在客戶端和服務(wù)器端之間完整(或部分)地共享代碼的應(yīng)用。通過在服務(wù)器端運(yùn)行應(yīng)用的JavaScript代碼，頁面可在發(fā)送到瀏覽器之前預(yù)先填充內(nèi)容，所以用戶甚至可以在瀏覽器JavaScript運(yùn)行之前就看到內(nèi)容。當(dāng)本地的JavaScript運(yùn)行時(shí)，它會(huì)接手后續(xù)的交互及導(dǎo)航操作，通過快速初始化加載和服務(wù)端頁面渲染，讓用戶在單頁應(yīng)用程序中得到流暢的交互體驗(yàn)。

什么是同構(gòu)

隨著Node.js的異軍突起，前后端開發(fā)有了歸一化編程語言的基礎(chǔ)土壤，頁面模版、第三方依賴機(jī)制等都有實(shí)現(xiàn)前后端統(tǒng)一的契機(jī)。React率先引領(lǐng)了這種潮流，同構(gòu)的概念也因此得以更廣泛的傳播。

需要讀者明白的是，同構(gòu)應(yīng)用并不是不需要瀏覽器端渲染內(nèi)容，而是使服務(wù)端和瀏覽器端渲染達(dá)到一種平衡。那么，怎么理解這種平衡呢？

在服務(wù)器上生成渲染內(nèi)容，讓用戶盡早看到有信息的頁面。一個(gè)完整的應(yīng)用除包括純粹的靜態(tài)內(nèi)容以外，還包括各種事件響應(yīng)、用戶交互等。這就意味著在瀏覽器端一定還要執(zhí)行JavaScript腳本，以完成綁定事件、處理異步交互等工作。

從性能及用戶體驗(yàn)上來看，服務(wù)端渲染應(yīng)該表達(dá)出頁面最主要、最核心、最基本的信息；而瀏覽器端則需要針對(duì)交互完成進(jìn)一步的頁面渲染、事件綁定等增強(qiáng)功能。所謂同構(gòu)，就是指前后端共用一套代碼或邏輯，而在這套代碼或邏輯中，理想的狀況是在瀏覽器端進(jìn)一步渲染的過程中，判斷已有的DOM結(jié)構(gòu)和即將渲染出的結(jié)構(gòu)是否相同，若相同，則不重新渲染DOM結(jié)構(gòu)，只需要進(jìn)行事件綁定即可。

從這個(gè)維度上講，同構(gòu)和服務(wù)端渲染又有所區(qū)別，同構(gòu)更像是服務(wù)端渲染和瀏覽器端渲染的交集，它彌補(bǔ)了服務(wù)端和瀏覽器端的差異，從而使得同一套代碼或邏輯得以統(tǒng)一運(yùn)行。同構(gòu)的核心是“同一套代碼”，這是脫離于兩端角度的另一個(gè)維度。

同構(gòu)的優(yōu)勢(shì)和劣勢(shì)

同構(gòu)的優(yōu)勢(shì)如下：

更好的性能。這里的性能主要指渲染更加迅速、首屏展現(xiàn)的時(shí)間更快、文件更少，以及文件體積更小。

SEO優(yōu)化支持。服務(wù)端接收到請(qǐng)求后，會(huì)返回一個(gè)相對(duì)完整、包含了初始內(nèi)容的HTML文檔，所以更有利于搜索引擎爬蟲獲取信息，提高搜索結(jié)果展現(xiàn)排名。同時(shí)，更快的頁面加載時(shí)間也有利于搜索結(jié)果展現(xiàn)排名的提升。

實(shí)現(xiàn)更加靈活。服務(wù)端渲染只是直出頁面的初始內(nèi)容，瀏覽器端仍然需要做后續(xù)工作，以完成頁面的最終展現(xiàn)。這樣服務(wù)端渲染和瀏覽器端渲染仍可以平衡，在很大程度上也能實(shí)現(xiàn)代碼復(fù)用。

可維護(hù)性更強(qiáng)。因?yàn)榻柚鶵eact等類庫，我們完全能夠?qū)崿F(xiàn)大范圍的代碼復(fù)用，避免了服務(wù)端和瀏覽器端同時(shí)維護(hù)兩套代碼或邏輯。因此，整體代碼量更少，維護(hù)成本更低。

對(duì)于低端機(jī)型更加友好。因?yàn)閮?nèi)容的初步渲染是在服務(wù)端完成的，所以對(duì)于低端機(jī)型更加友好，不至于頁面加載時(shí)出現(xiàn)白屏幕的狀況。

對(duì)于惡劣的網(wǎng)絡(luò)環(huán)境更加友好。傳統(tǒng)的前后端分離方式，在所有的JavaScript腳本下載并執(zhí)行完畢后，才會(huì)呈現(xiàn)頁面內(nèi)容，中間經(jīng)歷了較多的網(wǎng)絡(luò)請(qǐng)求，在惡劣的網(wǎng)絡(luò)環(huán)境下，無疑增加了頁面呈現(xiàn)基本內(nèi)容的難度。在這方面，同構(gòu)應(yīng)用顯然更有優(yōu)勢(shì)。

更好的用戶體驗(yàn)。為了更加合理地平衡服務(wù)端和瀏覽器端渲染內(nèi)容，我們可以將頁面重要的核心部分設(shè)計(jì)在服務(wù)端完成，而次重要的交互部分可以在更重要的內(nèi)容渲染完畢后，由瀏覽器端渲染或?qū)崿F(xiàn)，這將有力地提升用戶體驗(yàn)。

同構(gòu)的劣勢(shì)如下：

服務(wù)端處理的邏輯增多，增加了復(fù)雜性。

服務(wù)端無法完全復(fù)用瀏覽器端代碼。

增加了服務(wù)端的TTFB（Time To First Byte）時(shí)間。TTFB時(shí)間指的是從瀏覽器發(fā)起最初的網(wǎng)絡(luò)請(qǐng)求，到從服務(wù)器接收到第一個(gè)字節(jié)的這段時(shí)間。它包含了TCP連接時(shí)間、發(fā)送HTTP請(qǐng)求的時(shí)間和獲得響應(yīng)消息的第一個(gè)字節(jié)的時(shí)間。因?yàn)閷?duì)數(shù)據(jù)的獲取和對(duì)頁面初始內(nèi)容的渲染，勢(shì)必會(huì)降低服務(wù)端返回的速度。

擴(kuò)展知識(shí)：

前后端架構(gòu)設(shè)計(jì)和服務(wù)端渲染概念

服務(wù)端渲染或直出的概念越來越流行。在了解如何基于React實(shí)現(xiàn)服務(wù)端渲染之前，我們有必要在架構(gòu)層面對(duì)服務(wù)端渲染的“前世今生”進(jìn)行整體了解：為什么會(huì)出現(xiàn)這樣一個(gè)概念；這個(gè)概念落地之后能解決什么問題；服務(wù)端渲染和其他方式對(duì)比有何利弊等。

前后端配合技術(shù)的演進(jìn)

早期的Web開發(fā)，架構(gòu)設(shè)計(jì)簡(jiǎn)單、直接，具體來講，就是頁面由JSP、PHP等工程師在服務(wù)端生成，瀏覽器只負(fù)責(zé)展現(xiàn)。那時(shí)候，前端工程師只需要給靜態(tài)頁面添加一些動(dòng)態(tài)交互效果，很少會(huì)涉及數(shù)據(jù)邏輯等；而后端工程師負(fù)責(zé)頁面內(nèi)容，即當(dāng)用戶請(qǐng)求頁面時(shí)，后端進(jìn)行處理并返回完整的靜態(tài)頁面。這些過程一般會(huì)依靠模板引擎來完成。因此，在那個(gè)時(shí)候，甚至沒有獨(dú)立的前端工程師職位。即使有的話，這種做法的缺點(diǎn)也很明顯，比如前后端分工職責(zé)不清。

如果由前端人員來開發(fā)模板，那么前端將會(huì)極度依賴后端環(huán)境，難以實(shí)現(xiàn)開發(fā)效率的最大化，同時(shí)關(guān)于數(shù)據(jù)格式的溝通成本也相對(duì)較高。另外，這樣的架構(gòu)模式對(duì)于前端技術(shù)的發(fā)揮和利用瀏覽器能力的空間是非常有限的。

隨著前端技術(shù)的飛速發(fā)展，尤其是AJAX和Node.js等技術(shù)的出現(xiàn)，一種前后端分離的架構(gòu)模式應(yīng)運(yùn)而生。在這種模式下，前后端分工變得非常清晰，兩端的關(guān)鍵協(xié)作點(diǎn)是AJAX接口。下面我們以用戶訪問頁面為例來一步步了解這種模式，如下圖所示。

以上就是“react同構(gòu)應(yīng)用的概念是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。