淺談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í)行以下步驟：
- 所有組件的會先進行初始化（es6執(zhí)行構(gòu)造函數(shù)）。
- 所有組件的 render () 方法會被調(diào)用一次，完成這個過程后會得到一顆虛擬的 dom 樹。
- 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一致還得花不少功夫。不過原理清楚了，事情總能辦成。
相關(guān)文章
Node-sass是一個庫,它將Node.js綁定到LibSass（流行樣式表預(yù)處理器Sass的C版本）,它允許用戶以令人難以置信的速度將.scss文件本地編譯為css,并通過連接中間件自動編譯,下面這篇文章主要給大家介紹了關(guān)于React安裝node-sass失敗解決的相關(guān)資料,需要的朋友可以參考下2022-11-11
Remix后臺開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺開發(fā)之remix-antd-admin配置過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
錨點目錄定位功能在長頁面和文檔類網(wǎng)站中非常常見,它可以讓用戶快速定位到頁面中的某個章節(jié),本文講給大家介紹一下React項目中如何實現(xiàn)一個簡單的錨點目錄定位,文中有詳細的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了React開發(fā)進階redux saga使用原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
React框架快速實現(xiàn)簡易的Markdown編輯器
這篇文章主要為大家介紹了使用React框架實現(xiàn)簡易的Markdown編輯器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
在 React 中使用 Redux 解決的問題小結(jié)
在 React 中組件通信的數(shù)據(jù)流是單向的，頂層組件可以通過 props 屬性向下層組件傳遞數(shù)據(jù)，而下層組件不能直接向上層組件傳遞數(shù)據(jù)，這篇文章主要介紹了使用react+redux實現(xiàn)彈出框案例,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了react實現(xiàn)消息顯示器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本文主要介紹了使用react完成點擊返回頂部操作，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我們需要將之前編寫的redux代碼，融入到react當(dāng)中去，本文給大家詳細講解，需要的朋友可以參考下2022-11-11