React 同構開發（二）

所謂同構，簡單的說就是客戶端的**可以在服務端執行，好處就是能極大的提公升首屏時間，避免白屏，另外同構也給seo提供了很多便利。

react 同構得益於 react 的虛擬 dom。虛擬 dom 以物件樹的形式儲存在記憶體中，並存在前後端兩種展現形式。

在服務端通過 reactdomserver.rendertostring 方法將虛擬 dom 渲染為 html 字串，到客戶端時，react 只需要做一些事件繫結等操作就可以了。

在這一整套流程中，保證 dom 結構的一致性是至關重要的一點。 react 通過data-react-checksum來檢測一致性，即在服務端產生 html 字串的時候會額外的計算乙個data-react-checksum值，客戶端會對這個值進行校驗，如果與客戶端計算的值一致，則 react 只會進行事件繫結，如果不一致，react 會丟棄服務端返回的 dom 結構重新渲染。

react 新版本中已經在推薦採用 es6/7 開發元件了，因此服務端對 es6/7 的支援也不得不跟上我們開發元件的步伐。但是現在 node 原生對 es6/7 的支援還比較弱，這個時候我們就需要借助於 babel 來完成 es6/7 到 es5 的轉換。這一轉換，我們通過 babel-register 來完成。

babel-register 通過繫結 require 函式的方式（require hook）,在 require jsx 以及使用 es6/7 編寫的 js 檔案時，使用 babel 轉換語法，因此，應該在任何 jsx **執行前，執行 require('babel-register')(config)，同時通過配置項config，配置babel語法等級、外掛程式等。

這裡我們給乙個配置 demo，具體配置方法可參看官方文件。

]}]
]}
}}

一般情況來說，不需要服務端處理非js檔案，但是如果直接在服務端 require 乙個非 js 檔案的話會報錯，因為 require 函式不認識非 js 檔案，這時候我們需要做如下處理，已樣式檔案為例：

var module = require('module');
module._extensions['.less'] = function(module, fn) ;
module._extensions['.css'] = function(module, fn) ;

具體原理可以參考require 解讀

或者直接在babel-register中配置忽略規則：

require("babel-register")();

但是，如果專案中使用了 css_modules 的話，那服務端就必須要處理 less 等檔案了。為了解決這個問題，需要乙個額外的工具 webpack-isomorphic-tools，幫助識別 less 等檔案。

簡單地說，webpack-isomorphic-tools，完成了兩件事：

客戶端的**通過配置 webpack 打包發布到 cdn 即可。

通過配置 webpack 和 webpack-isomorphic-tools 將非 js 檔案打包成 assets 檔案即可。

React 同構開發（二）

react揚帆起航之同構（一）

react服務端渲染（同構）

React同構與極致的效能優化

React 同構開發（二）

react揚帆起航之同構（一）

react服務端渲染（同構）

React同構與極致的效能優化

相關推薦