淺談React前后端同構(gòu)防止重復(fù)渲染
什么叫前后端同構(gòu)？
為了解決某些問題（比如SEO、提升渲染速度等）react 提供了2個方法在服務(wù)端生成一個HTML文本格式的字符串。在得到了這個HTML格式的字符串之后，通常會將其組裝成一個頁面直接返回給用戶的瀏覽器。
到這里，服務(wù)端的活已經(jīng)干完了，然后就是瀏覽器這邊干活。
瀏覽器拿到HTML文本后，立刻進(jìn)行渲染將內(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的問題準(zhǔn)備和你開始撕逼了。
聰明如 Facebook 的工程師當(dāng)然想到了這些問題，所以他們在ReactDOMServer.renderToString(element) 方法中提供了一個 checksum 機(jī)制。
關(guān)于 checksum 官網(wǎng) 并沒有太多介紹，但是國內(nèi)外的各路博客介紹了不少。我一直想找 react 開發(fā)者關(guān)于這個機(jī)制的介紹一直沒找到……。
前后端同構(gòu)就是保證前端和后端的dom結(jié)構(gòu)一致，不會發(fā)生重復(fù)渲染。react 使用 checksum 機(jī)制進(jìn)行保障。
什么叫React首屏渲染？
簡單的說就是 react 在瀏覽器內(nèi)存中第一次生成的虛擬 dom 樹。切記是虛擬 dom ，而不是瀏覽器的dom。
了解 react 的應(yīng)該知道，所有 react 組件都有一個 render() 方法（如果使用function方式編寫的組件會把function里的所有代碼都塞到 render() 方法中去）。當(dāng)ReactDOM.render( element, container, [callback] )方法執(zhí)行時，會執(zhí)行以下步驟：
- 所有組件的會先進(jìn)行初始化（es6執(zhí)行構(gòu)造函數(shù)）。
- 所有組件的 render () 方法會被調(diào)用一次，完成這個過程后會得到一顆虛擬的 dom 樹。
- react 會將虛擬dom轉(zhuǎn)換成瀏覽器dom，完成后調(diào)用組件的 componentDidMount() 方法告訴你已經(jīng)裝載到瀏覽器上了。
在上面這個過程成中，步驟2完成后即為完成 react 的首屏渲染。結(jié)合 checksum 機(jī)制步驟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 一致則認(rèn)為服務(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一致還得花不少功夫。不過原理清楚了，事情總能辦成。
相關(guān)文章
一篇文章教你用React實現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實現(xiàn)菜譜軟件的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-09-09
ReactQuery系列React?Query?實踐示例詳解
這篇文章主要為大家介紹了ReactQuery系列React?Query?實踐示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
React是用于構(gòu)建用戶界面的JavaScript庫。本文詳細(xì)講解了React的生命周期，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
React項目通常都有很多的URL需要管理，最常使用的解決方案就是React Router了，本篇文章主要介紹了React路由管理之React Router總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本篇文章主要介紹了詳解升級react-router 4 踩坑指南，主要是對react-router 4升級的踩坑總結(jié)，有興趣的可以了解一下2017-08-08
這篇文章主要為大家詳細(xì)介紹了如何基于React實現(xiàn)一個todo打勾效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
React?Hooks是React?16.8版本引入的新特性,它使得在函數(shù)組件中也能夠使用狀態(tài)（state）和其他React特性,本文就來詳細(xì)介紹一下React?Hooks項目實戰(zhàn),感興趣的可以了解一下2023-11-11
這篇文章主要介紹了React實現(xiàn)反向代理和修改打包后的目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-11-11