快捷導(dǎo)航

淺談React前后端同構(gòu)防止重復(fù)渲染

更新時(shí)間：2018年01月05日 11:44:45 作者：隨風(fēng)溜達(dá)的向日葵

這篇文章主要介紹了淺談React前后端同構(gòu)防止重復(fù)渲染，首先解釋React前后端同構(gòu)、React首屏渲染的概念。然后通過(guò)這2個(gè)概念解決服務(wù)端渲染完成后瀏覽器端重復(fù)渲染的問(wèn)題。有興趣的可以了解一下

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

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

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

瀏覽器拿到HTML文本后，立刻進(jìn)行渲染將內(nèi)容呈現(xiàn)給用戶(hù)。然后加載頁(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寫(xiě)到瀏覽器的真實(shí)dom中。因?yàn)?react 總是根據(jù)虛擬dom來(lái)生成真實(shí)dom，所以最后會(huì)把服務(wù)器端渲染好的HTML全部替換掉。

上面這個(gè)事情說(shuō)不是問(wèn)題確實(shí)也不是問(wèn)題，無(wú)非就是用戶(hù)看到頁(yè)面然后“閃現(xiàn)”一下。說(shuō)是問(wèn)題還真是個(gè)問(wèn)題，產(chǎn)品會(huì)拿著這毛病從用戶(hù)體驗(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方式編寫(xiě)的組件會(huì)把function里的所有代碼都塞到 render() 方法中去）。當(dāng)ReactDOM.render( element, container, [callback] )方法執(zhí)行時(shí)，會(huì)執(zhí)行以下步驟：

所有組件的會(huì)先進(jìn)行初始化（es6執(zhí)行構(gòu)造函數(shù)）。
所有組件的 render () 方法會(huì)被調(diào)用一次，完成這個(gè)過(guò)程后會(huì)得到一顆虛擬的 dom 樹(shù)。
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 值寫(xiě)在根元素的屬性上：

這個(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ò)原理清楚了，事情總能辦成。

您可能感興趣的文章: