React 同構(gòu)

所謂同構(gòu)，簡(jiǎn)單的說(shuō)就是客戶端的代碼可以在服務(wù)端運(yùn)行，好處就是能極大的提升首屏?xí)r間，避免白屏，另外同構(gòu)也給SEO提供了很多便利。

React 同構(gòu)得益于 React 的虛擬 DOM。虛擬 DOM 以對(duì)象樹(shù)的形式保存在內(nèi)存中，并存在前后端兩種展現(xiàn)形式。

  • 在客戶端上，虛擬 DOM 通過(guò) ReactDOM 的 render 方法渲染到頁(yè)面中，形成真實(shí)的 dom。

  • 在服務(wù)端上，React 提供了另外兩個(gè)方法： ReactDOMServer.renderToString 和 ReactDOMServer.renderToStaticMarkup 將虛擬 DOM 渲染為 HTML 字符串。

在服務(wù)端通過(guò) ReactDOMServer.renderToString 方法將虛擬 DOM 渲染為 HTML 字符串，到客戶端時(shí)，React 只需要做一些事件綁定等操作就可以了。

在這一整套流程中，保證 DOM 結(jié)構(gòu)的一致性是至關(guān)重要的一點(diǎn)。 React 通過(guò) data-react-checksum來(lái)檢測(cè)一致性，即在服務(wù)端產(chǎn)生 HTML 字符串的時(shí)候會(huì)額外的計(jì)算一個(gè) d