什么叫前后端同構(gòu)？

金灣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

為了解決某些問(wèn)題（比如SEO、提升渲染速度等）react 提供了2個(gè)方法在服務(wù)端生成一個(gè)HTML文本格式的字符串。在得到了這個(gè)HTML格式的字符串之后，通常會(huì)將其組裝成一個(gè)頁(yè)面直接返回給用戶的瀏覽器。

到這里，服務(wù)端的活已經(jīng)干完了，然后就是瀏覽器這邊干活。

瀏覽器拿到HTML文本后，立刻進(jìn)行渲染將內(nèi)容呈現(xiàn)給用戶。然后加載頁(yè)面所需的 .js 文件，然后執(zhí)行 JavaScript 腳本，然后開(kāi)始初始化 react 組件…………

到這里問(wèn)題就來(lái)了。react 初始化組件后會(huì)執(zhí)行組件內(nèi)所有 render () 方法，然后生成虛擬DOM的樹(shù)形結(jié)構(gòu)，然后在適當(dāng)?shù)臅r(shí)候?qū)⑻摂Mdom寫到瀏覽器的真實(shí)dom中。因?yàn)?react 總是根據(jù)虛擬dom來(lái)生成真實(shí)dom，所以最后會(huì)把服務(wù)器端渲染好的HTML全部替換掉。

上面這個(gè)事情說(shuō)不是問(wèn)題確實(shí)也不是問(wèn)題，無(wú)非就是用戶看到頁(yè)面然后“閃現(xiàn)”一下。說(shuō)是問(wèn)題還真是個(gè)問(wèn)題，產(chǎn)品會(huì)拿著這毛病從用戶體驗(yàn)的角度在各種場(chǎng)合和你死磕半個(gè)月?？睦哿四闼餍园逊?wù)端渲染關(guān)了，然后運(yùn)營(yíng)又拿著SEO的問(wèn)題準(zhǔn)備和你開(kāi)始撕逼了。

聰明如 Facebook 的工程師當(dāng)然想到了這些問(wèn)題，所以他們?cè)赗eactDOMServer.renderToString(element) 方法中提供了一個(gè) checksum 機(jī)制。

關(guān)于 checksum 官網(wǎng) 并沒(méi)有太多介紹，但是國(guó)內(nèi)外的各路博客介紹了不少。我一直想找 react 開(kāi)發(fā)者關(guān)于這個(gè)機(jī)制的介紹一直沒(méi)找到……。

前后端同構(gòu)就是保證前端和后端的dom結(jié)構(gòu)一致，不會(huì)發(fā)生重復(fù)渲染。react 使用 checksum 機(jī)制進(jìn)行保障。

什么叫React首屏渲染？

簡(jiǎn)單的說(shuō)就是 react 在瀏覽器內(nèi)存中第一次生成的虛擬 dom 樹(shù)。切記是虛擬 dom ，而不是瀏覽器的dom。

了解 react 的應(yīng)該知道，所有 react 組件都有一個(gè) render() 方法（如果使用function方式編寫的組件會(huì)把function里的所有代碼都塞到 render() 方法中去）。當(dāng)ReactDOM.render( element, container, [callback] )方法執(zhí)行時(shí)，會(huì)執(zhí)行以下步驟：

1. 所有組件的會(huì)先進(jìn)行初始化（es6執(zhí)行構(gòu)造函數(shù)）。
2. 所有組件的 render () 方法會(huì)被調(diào)用一次，完成這個(gè)過(guò)程后會(huì)得到一顆虛擬的 dom 樹(shù)。
3.  react 會(huì)將虛擬dom轉(zhuǎn)換成瀏覽器dom，完成后調(diào)用組件的 componentDidMount() 方法告訴你已經(jīng)裝載到瀏覽器上了。

在上面這個(gè)過(guò)程成中，步驟2完成后即為完成 react 的首屏渲染。結(jié)合 checksum 機(jī)制步驟3有可能不會(huì)執(zhí)行。

當(dāng)組件狀態(tài)發(fā)生變更時(shí)（ setState() 生命周期函數(shù)被調(diào)用）或者 父組件渲染時(shí)（父組件的 render() 方法被調(diào)用），當(dāng)前組件的 render() 方法都會(huì)被執(zhí)行，都有可能會(huì)導(dǎo)致虛擬dom變更，但是這些變更和首屏渲染沒(méi)任何關(guān)系了。

React前后端同構(gòu)首屏渲染

了解了同構(gòu)和首屏渲染，就好理解如何解決首屏不重復(fù)渲染的問(wèn)題了。

首先服務(wù)端渲染完之后會(huì)有一個(gè) checksum 值寫在根元素的屬性上：

這個(gè) checksum 是根據(jù)服務(wù)端生成的HTML內(nèi)容哈希計(jì)算得到的。

然后在瀏覽器加載完所有的js文件之后，開(kāi)始執(zhí)行前面介紹的 ReactDOM.render( element, container, [callback] )  初始化渲染的三個(gè)步驟。當(dāng)執(zhí)行完第二步生成虛擬dom后，react 會(huì)根虛擬dom用相同的算法計(jì)算一個(gè)哈希值，如果和 checksum 一致則認(rèn)為服務(wù)器已經(jīng)完成渲染，不會(huì)再執(zhí)行第三步。

如果 checksum 比對(duì)不一致，在 開(kāi)發(fā)環(huán)境 和 測(cè)試環(huán)境 會(huì)在瀏覽器console中輸出以下警告內(nèi)容：

生產(chǎn)環(huán)境不會(huì)輸出任何警告。

同構(gòu)渲染的內(nèi)容就這么多，原理其實(shí)蠻簡(jiǎn)單的，無(wú)非就是保證DOM一致。但是結(jié)合代碼分片、異步加載、服務(wù)端調(diào)接口異步組裝數(shù)據(jù)等等功能后，如何保證服務(wù)端和瀏覽器端第一次渲染的dom一致還得花不少功夫。不過(guò)原理清楚了，事情總能辦成。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：淺談React前后端同構(gòu)防止重復(fù)渲染-創(chuàng)新互聯(lián)
當(dāng)前地址：http://jinyejixie.com/article18/ccpsdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站策劃、網(wǎng)站建設(shè)、定制網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)