react前後端同構渲染範例程式碼-js教程-PHP中文網

首頁

web前端

js教程

react前後端同構渲染範例程式碼

小云云

Feb 12, 2018 am 09:10 AM

react渲染範例

前後端同構渲染：當客戶端請求一個包含React元件頁面的時候，服務端首先回應輸出這個頁面，客戶端和服務端有了第一次互動。然後，如果載入元件的過程需要向服務端發出Ajax請求等，客戶端和服務端又進行了一次交互，這樣，耗時相對較長。前後端同構渲染可以在頁面初次載入時把所有地方渲染好一次性回應給客戶端。本文主要跟大家介紹了淺談react前後端同構渲染，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

實作方式：保證套件管理工具和模組依賴方式一致

套件管理工具-npm管理，保證前後端都使用同一個相容套件

模組依賴方式-webpack，確保前後端都採用commonjs的依賴方式，確保程式碼可以互相依賴

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

react 和reactDOM

reactDOM在這裡提供的支援就是reactDOM.render和reactDOM.renderToString函數，其中欠著會在瀏覽器產生DOM結構，後者會在服務端產生對應的HTML字串模板。 react會在產生的DOM結構上加入一個 data-react-checksum的屬性，這是一個 adler32 演算法的校驗和，以確保兩份範本的一致性。

react前後端同構渲染範例程式碼

同時 react 的生命週期在前後端渲染過程中也有所不同。前端渲染的元件擁有完整的生命週期，而後端渲染僅有 componentWillMount 的生命週期。這意味著，如果我們想進行前後端共同操作的邏輯，例如發送資料請求等，可以放在 componentWillMount 的生命週期中；如果想單獨處理客戶端的邏輯，可以放在其他生命週期，如 componentDidMount 中。

react-router

react-router是react的路由-視圖控制庫，可以書寫邊界的宣告式路由以控制不同頁面的渲染。 react-router 本身就是一個狀態機，根據配置好的路由規則，和輸入的 url 路徑，透過 match 方法找到對應的元件並進行渲染。

react前後端同構渲染範例程式碼

這套機制在前端和後端都是相通的，例如在後端，就是下面這樣一種實作形式來渲染：

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

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

redux

redux是react的資料流管理函式庫，他對服務端渲染的支援很簡單，就是單一的store和狀態可初始化。後端在進行渲染的時候會建立好單一的store，並且將建構好的初始狀態透過以json格式，透過全域變數寫到產生好的html字串模板上。
前端透過取得初始狀態，產生跟後端徐然完成後一模一樣的store,就可以保證前後端渲染資料的一致性，以確保前後端產生的dom結構一致。

最佳化結果：

#開發效率低的問題：同構應用程式只有一個專案和一套技術棧，只要擁有react 開發經驗，就可以快速投入前端和後端的開發當中；
可維護性差的問題：同構應用可以進行大量的程式碼公用，包括工具方法、常數、頁面元件和redux 的大部分邏輯等，可重複使用性大大提高；首屏效能、SEO 等

處理過程：

#用戶端發出請求-服務端渲染出元件-傳回給客戶端

1、在需要同構直出的頁面(例如index.html)放上佔位符

<p id="root">@@@</p>
###

以上，當客戶端發出首次請求，服務端渲染出元件的html內容放@@@這個位置，然後服務端再渲染出類似這樣的js程式碼段把元件最終渲染到DOM上。也就是說，renderApp方法其實就是在渲染元件。

2、而為了直接呼叫renderApp方法，必須讓renderApp方法成為window下的方法

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

3、服務端取出index.html，渲染出佔位符的內容，取代佔位符，並一次回應給客戶端

案例

#檔案結構

browser.js(在这里把渲染组件的过程赋值给window.renderApp)

bundle.js(把browser.js内容bundle到这里)

Component.js(组件在这里定义)

express.js(服务端)

index.html(同构直出的页面)

package.json

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

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
</head>
<body>

 <p id="root">@@@</p>
 <script src="bundle.js"></script>
 ###
</body>
</html>

Component.js，在這裡定義元件

var React = require(&#39;react&#39;);
var ReactDOM = require(&#39;react-dom&#39;);

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

 render: function(){
  return React.createElement(&#39;button&#39;, {onClick: this.clickHandler}, this.props.msg)
 }

})

module.exports = Component;

browser.js,把元件渲染過程賦值給window物件

var React = require(&#39;react&#39;);
var ReactDOM = require(&#39;react-dom&#39;);

var Component = React.createFactory(require(&#39;./Component&#39;));

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

可以通过来触发组件的渲染。稍后，在服务端会把这段代码渲染出来。

express.js,服务端

以上，需要直出的页面有了占位符，定义了组件，并把渲染组件的过程赋值给了window对象，服务端现在要做的工作就是：生成组件的html和渲染组件的js，放到直出页面index.html的占位符位置。

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

//原先把文件读出来
var BUNDLE = fs.readFileSync(&#39;./bundle.js&#39;,{encoding:&#39;utf8&#39;});
var TEMPLATE = fs.readFileSync(&#39;./index.html&#39;,{encoding:&#39;utf8&#39;});

var app = express();

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

 //@@@占位符的地方放组件
 var page = TEMPLATE.replace(&#39;@@@&#39;, ReactDOMServer.renderToString(comp));

 //###占位符的地方放js
 page = page.replace(&#39;###&#39;, &#39;<script>renderApp("&#39;+msg+&#39;")</script>&#39;)
 res.send(page);
}

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

app.listen(4000);

package.json中的配置

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

启动方式
运行：npm start
运行：node express.js
浏览：localhost:4000

相关推荐：

实现react服务器渲染基础方法

React前后端同构防止重复渲染

React将组件渲染到指定DOM节点的方法详解

以上是react前後端同構渲染範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles