淺談react前后端同構(gòu)渲染
前后端同構(gòu)渲染：當(dāng)客戶端請(qǐng)求一個(gè)包含React組件頁(yè)面的時(shí)候，服務(wù)端首先響應(yīng)輸出這個(gè)頁(yè)面，客戶端和服務(wù)端有了第一次交互。然后，如果加載組件的過(guò)程需要向服務(wù)端發(fā)出Ajax請(qǐng)求等，客戶端和服務(wù)端又進(jìn)行了一次交互，這樣，耗時(shí)相對(duì)較長(zhǎng)。前后端同構(gòu)渲染可以在頁(yè)面初次加載時(shí)把所有地方渲染好一次性響應(yīng)給客戶端
實(shí)現(xiàn)方式：保證包管理工具和模塊依賴方式一致
包管理工具-npm管理，保證前后端都使用同一個(gè)兼容包
模塊依賴方式-webpack，保證前后端都采用commonjs的依賴方式，確保代碼可以互相依賴
服務(wù)端如何渲染：
react全家桶：react、react-router、redux
react 和 reactDOM
reactDOM在這里提供的支持就是reactDOM.render和reactDOM.renderToString函數(shù)，其中欠著會(huì)在瀏覽器生成DOM結(jié)構(gòu)，后者會(huì)在服務(wù)端生成對(duì)應(yīng)的HTML字符串模板。react會(huì)在生成的DOM結(jié)構(gòu)上添加一個(gè) data-react-checksum的屬性，這是一個(gè) adler32 算法的校驗(yàn)和，用以確保兩份模板的一致性。
同時(shí) react 的生命周期在前后端渲染過(guò)程中也有所不同。前端渲染的組件擁有完整的生命周期，而后端渲染僅有 componentWillMount 的生命周期。這就意味著，如果我們想進(jìn)行前后端共同操作的邏輯，如發(fā)送數(shù)據(jù)請(qǐng)求等，可以放在 componentWillMount 的生命周期中；如果想單獨(dú)處理客戶端的邏輯，可以放在其他生命周期，如 componentDidMount 中。
react-router
react-router是react的路由-視圖控制庫(kù)，可以書寫邊界的聲明式路由以控制不同頁(yè)面的渲染。react-router 本身是一個(gè)狀態(tài)機(jī)，根據(jù)配置好的路由規(guī)則，和輸入的 url 路徑，通過(guò) match 方法找到對(duì)應(yīng)的組件并進(jìn)行渲染。
這套機(jī)制在前端和后端都是相通的，例如在后端，就是下面這樣一種實(shí)現(xiàn)形式來(lái)進(jìn)行渲染：
app.use(async (ctx, next) => {
match({
location: ctx.originalUrl,
routes
}, callback)
// 渲染完成之后，調(diào)用 callback 回調(diào)
// 將 組件 renderToString 返回前端即可
})
對(duì)于前端來(lái)說(shuō)，其實(shí)也是處理的上面這些邏輯，不過(guò)它被很好的封裝在 組件中，我們只需要寫好聲明式的路由，這一切就可以隨著 url 的變化自動(dòng)發(fā)生。
redux
redux是react的數(shù)據(jù)流管理庫(kù)，他對(duì)服務(wù)端渲染的支持很簡(jiǎn)單，就是單一的store和狀態(tài)可初始化。后端在進(jìn)行渲染的時(shí)候會(huì)構(gòu)建好單一的store，并將構(gòu)建好的初始狀態(tài)通過(guò)以json格式，通過(guò)全局變量寫到生成好的html字符串模板上。
前端通過(guò)獲取初始狀態(tài)，生成跟后端徐然完成后一模一樣的store,就可以保證前后端渲染數(shù)據(jù)的一致性，以確保前后端生成的dom結(jié)構(gòu)一致。
優(yōu)化結(jié)果：
開發(fā)效率低的問(wèn)題：同構(gòu)應(yīng)用只有一個(gè)項(xiàng)目和一套技術(shù)棧，只要擁有 react 開發(fā)經(jīng)驗(yàn)，就可以快速投入前端和后端的開發(fā)當(dāng)中；
可維護(hù)性差的問(wèn)題：同構(gòu)應(yīng)用可以進(jìn)行大量的代碼公用，包括工具方法、常量、頁(yè)面組件和 redux 的大部分邏輯等，可重用性大大提高； 首屏性能、SEO 等
處理過(guò)程：
客戶端發(fā)出請(qǐng)求-服務(wù)端渲染出組件-返回給客戶端
1、在需要同構(gòu)直出的頁(yè)面(比如是index.html)放上占位符
<div id="root">@@@</div> ###
以上，當(dāng)客戶端發(fā)出首次請(qǐng)求，服務(wù)端渲染出組件的html內(nèi)容放@@@這個(gè)位置，然后服務(wù)端再渲染出類似這樣的js代碼段把組件最終渲染到DOM上。也就是說(shuō)，renderApp方法實(shí)際上就是在渲染組件。
2、而為了直接調(diào)用renderApp方法，必須讓renderApp方法成為window下的方法
window.renderApp = function(){ReactDOM.render(...)}
3、服務(wù)端取出index.html，渲染出占位符的內(nèi)容，替代占位符，并一次性響應(yīng)給客戶端
案例
文件結(jié)構(gòu)
browser.js(在這里把渲染組件的過(guò)程賦值給window.renderApp) bundle.js(把browser.js內(nèi)容bundle到這里) Component.js(組件在這里定義) express.js(服務(wù)端) index.html(同構(gòu)直出的頁(yè)面) package.json
index.html，直出頁(yè)面放上占位符
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> </head> <body> <div id="root">@@@</div> <script src="bundle.js"></script> ### </body> </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,把組件渲染過(guò)程賦值給window對(duì)象
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'));
}
可以通過(guò)來(lái)觸發(fā)組件的渲染。稍后，在服務(wù)端會(huì)把這段代碼渲染出來(lái)。
express.js,服務(wù)端
以上，需要直出的頁(yè)面有了占位符，定義了組件，并把渲染組件的過(guò)程賦值給了window對(duì)象，服務(wù)端現(xiàn)在要做的工作就是：生成組件的html和渲染組件的js，放到直出頁(yè)面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'));
//原先把文件讀出來(lái)
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('###', '<script>renderApp("'+msg+'")</script>')
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"
},
啟動(dòng)方式
運(yùn)行：npm start
運(yùn)行：node express.js
瀏覽：localhost:4000
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2023-01-01
react中的useContext具體實(shí)現(xiàn)
useContext是React提供的一個(gè)鉤子函數(shù),用于在函數(shù)組件中訪問(wèn)和使用Context,useContext的實(shí)現(xiàn)原理涉及React內(nèi)部的機(jī)制,本文給大家介紹react中的useContext具體實(shí)現(xiàn),感興趣的朋友一起看看吧2023-11-11
react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例
本文主要介紹了react.js實(shí)現(xiàn)頁(yè)面登錄跳轉(zhuǎn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
Fiber?可以理解為一個(gè)執(zhí)行單元，每次執(zhí)行完一個(gè)執(zhí)行單元，React?Fiber就會(huì)檢查還剩多少時(shí)間，如果沒(méi)有時(shí)間則將控制權(quán)讓出去，然后由瀏覽器執(zhí)行渲染操作，這篇文章主要介紹了React?Fiber架構(gòu)原理剖析,需要的朋友可以參考下2022-08-08
React跨路由組件動(dòng)畫實(shí)現(xiàn)
在 React 中路由之前的切換動(dòng)畫可以使用 react-transition-group 來(lái)實(shí)現(xiàn),但對(duì)于不同路由上的組件如何做到動(dòng)畫過(guò)渡是個(gè)很大的難題,目前社區(qū)中也沒(méi)有一個(gè)成熟的方案,本文給大家分享React跨路由組件動(dòng)畫實(shí)現(xiàn),感興趣的朋友一起看看吧2023-10-10
詳解如何在React中優(yōu)雅的使用addEventListener
這篇文章主要為大家詳細(xì)介紹了如何在React中優(yōu)雅的使用addEventListener，文中的示例代碼簡(jiǎn)潔易懂，對(duì)大家學(xué)習(xí)React有一定的幫助，需要的可以參考一下2023-01-01
本文主要介紹了react-router-dom v6版本基本使用介紹，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng)思路詳解
這篇文章主要介紹了react+react-beautiful-dnd實(shí)現(xiàn)代辦事項(xiàng),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
使用react-native-doc-viewer實(shí)現(xiàn)文檔預(yù)覽
這篇文章主要介紹了使用react-native-doc-viewer實(shí)現(xiàn)文檔預(yù)覽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個(gè)函數(shù)，并不是組件，這一點(diǎn)一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2022-12-12