什么叫前后端同構？

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

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

到這里，服務端的活已經干完了，然后就是瀏覽器這邊干活。

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

到這里問題就來了。react 初始化組件后會執(zhí)行組件內所有 render () 方法，然后生成虛擬DOM的樹形結構，然后在適當?shù)臅r候將虛擬dom寫到瀏覽器的真實dom中。因為 react 總是根據虛擬dom來生成真實dom，所以最后會把服務器端渲染好的HTML全部替換掉。

上面這個事情說不是問題確實也不是問題，無非就是用戶看到頁面然后“閃現(xiàn)”一下。說是問題還真是個問題，產品會拿著這毛病從用戶體驗的角度在各種場合和你死磕半個月。磕累了你索性把服務端渲染關了，然后運營又拿著SEO的問題準備和你開始撕逼了。

聰明如 Facebook 的工程師當然想到了這些問題，所以他們在ReactDOMServer.renderToString(element) 方法中提供了一個 checksum 機制。

關于 checksum 官網 并沒有太多介紹，但是國內外的各路博客介紹了不少。我一直想找 react 開發(fā)者關于這個機制的介紹一直沒找到……。

前后端同構就是保證前端和后端的dom結構一致，不會發(fā)生重復渲染。react 使用 checksum 機制進行保障。

什么叫React首屏渲染？

簡單的說就是 react 在瀏覽器內存中第一次生成的虛擬 dom 樹。切記是虛擬 dom ，而不是瀏覽器的dom。

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

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

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

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

React前后端同構首屏渲染

了解了同構和首屏渲染，就好理解如何解決首屏不重復渲染的問題了。

首先服務端渲染完之后會有一個 checksum 值寫在根元素的屬性上：

這個 checksum 是根據服務端生成的HTML內容哈希計算得到的。

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

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

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

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

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

新聞標題：淺談React前后端同構防止重復渲染-創(chuàng)新互聯(lián)
當前地址：http://aaarwkj.com/article18/ccpsdp.html

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

廣告

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