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

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

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

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

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

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

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

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

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

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

什么叫React首屏渲染？

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

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

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

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

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

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

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

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

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

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

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

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

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