日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

前后端同構(gòu)渲染：當客戶端請求一個包含React組件頁面的時候，服務端首先響應輸出這個頁面，客戶端和服務端有了第一次交互。然后，如果加載組件的過程需要向服務端發(fā)出Ajax請求等，客戶端和服務端又進行了一次交互，這樣，耗時相對較長。前后端同構(gòu)渲染可以在頁面初次加載時把所有地方渲染好一次性響應給客戶端

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的龍南網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

實現(xiàn)方式：保證包管理工具和模塊依賴方式一致

包管理工具-npm管理，保證前后端都使用同一個兼容包

模塊依賴方式-webpack，保證前后端都采用commonjs的依賴方式，確保代碼可以互相依賴

服務端如何渲染：
react全家桶：react、react-router、redux

react 和 reactDOM

reactDOM在這里提供的支持就是reactDOM.render和reactDOM.renderToString函數(shù)，其中欠著會在瀏覽器生成DOM結(jié)構(gòu)，后者會在服務端生成對應的HTML字符串模板。react會在生成的DOM結(jié)構(gòu)上添加一個 data-react-checksum的屬性，這是一個 adler32 算法的校驗和，用以確保兩份模板的一致性。

同時 react 的生命周期在前后端渲染過程中也有所不同。前端渲染的組件擁有完整的生命周期，而后端渲染僅有 componentWillMount 的生命周期。這就意味著，如果我們想進行前后端共同操作的邏輯，如發(fā)送數(shù)據(jù)請求等，可以放在 componentWillMount 的生命周期中；如果想單獨處理客戶端的邏輯，可以放在其他生命周期，如 componentDidMount 中。

react-router

react-router是react的路由-視圖控制庫，可以書寫邊界的聲明式路由以控制不同頁面的渲染。react-router 本身是一個狀態(tài)機，根據(jù)配置好的路由規(guī)則，和輸入的 url 路徑，通過 match 方法找到對應的組件并進行渲染。

這套機制在前端和后端都是相通的，例如在后端，就是下面這樣一種實現(xiàn)形式來進行渲染：

app.use(async (ctx, next) => { 
match({ 
location: ctx.originalUrl, 
routes 
}, callback) 
// 渲染完成之后，調(diào)用 callback 回調(diào) 
// 將 組件 renderToString 返回前端即可 
}) 

對于前端來說，其實也是處理的上面這些邏輯，不過它被很好的封裝在 組件中，我們只需要寫好聲明式的路由，這一切就可以隨著 url 的變化自動發(fā)生。

redux

redux是react的數(shù)據(jù)流管理庫，他對服務端渲染的支持很簡單，就是單一的store和狀態(tài)可初始化。后端在進行渲染的時候會構(gòu)建好單一的store，并將構(gòu)建好的初始狀態(tài)通過以json格式，通過全局變量寫到生成好的html字符串模板上。
前端通過獲取初始狀態(tài)，生成跟后端徐然完成后一模一樣的store,就可以保證前后端渲染數(shù)據(jù)的一致性，以確保前后端生成的dom結(jié)構(gòu)一致。

優(yōu)化結(jié)果：

開發(fā)效率低的問題：同構(gòu)應用只有一個項目和一套技術(shù)棧，只要擁有 react 開發(fā)經(jīng)驗，就可以快速投入前端和后端的開發(fā)當中；
可維護性差的問題：同構(gòu)應用可以進行大量的代碼公用，包括工具方法、常量、頁面組件和 redux 的大部分邏輯等，可重用性大大提高； 首屏性能、SEO 等

處理過程：

客戶端發(fā)出請求-服務端渲染出組件-返回給客戶端

1、在需要同構(gòu)直出的頁面(比如是index.html)放上占位符

@@@
###

以上，當客戶端發(fā)出首次請求，服務端渲染出組件的html內(nèi)容放@@@這個位置，然后服務端再渲染出類似這樣的js代碼段把組件最終渲染到DOM上。也就是說，renderApp方法實際上就是在渲染組件。

2、而為了直接調(diào)用renderApp方法，必須讓renderApp方法成為window下的方法

window.renderApp = function(){ReactDOM.render(...)}

3、服務端取出index.html，渲染出占位符的內(nèi)容，替代占位符，并一次性響應給客戶端

案例

文件結(jié)構(gòu)

browser.js(在這里把渲染組件的過程賦值給window.renderApp)

bundle.js(把browser.js內(nèi)容bundle到這里)

Component.js(組件在這里定義)

express.js(服務端)

index.html(同構(gòu)直出的頁面)

package.json

index.html，直出頁面放上占位符

 
 



 
@@@
 
 ###

Component.js，在這里定義組件

var React = require('react');
var ReactDOM = require('react-dom');

var Component = React.createClass({
 clickHandler: function(){
  alert(this.props.msg)
 },

 render: function(){
  return React.createElement('button', {onClick: this.clickHandler}, this.props.msg)
 }

})

module.exports = Component;

browser.js,把組件渲染過程賦值給window對象

var React = require('react');
var ReactDOM = require('react-dom');

var Component = React.createFactory(require('./Component'));

window.renderApp = function(msg){
 ReactDOM.render(Component({msg: msg}), document.getElementById('root')); 
}

可以通過來觸發(fā)組件的渲染。稍后，在服務端會把這段代碼渲染出來。

express.js,服務端

以上，需要直出的頁面有了占位符，定義了組件，并把渲染組件的過程賦值給了window對象，服務端現(xiàn)在要做的工作就是：生成組件的html和渲染組件的js，放到直出頁面index.html的占位符位置。

var express = require('express');
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var fs = require('fs');
var Component = React.createFactory(require('./Component'));

//原先把文件讀出來
var BUNDLE = fs.readFileSync('./bundle.js',{encoding:'utf8'});
var TEMPLATE = fs.readFileSync('./index.html',{encoding:'utf8'});

var app = express();

function home(req, res){
 var msg = req.params.msg || 'Hello';
 var comp = Component({msg: msg});

 //@@@占位符的地方放組件
 var page = TEMPLATE.replace('@@@', ReactDOMServer.renderToString(comp));

 //###占位符的地方放js
 page = page.replace('###', '')
 res.send(page);
}

//路由
app.get('', home);
app.get('/bundle.js', function(req, res){
 res.send(BUNDLE);
})
app.get('/:msg', home);

app.listen(4000);
 

package.json中的配置

"scripts": {
"start": "watchify ./browser.js -o ./bundle.js"
},

啟動方式
運行：npm start
運行：node express.js
瀏覽：localhost:4000

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。