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 的生命周期在前后端渲染过程中也有所不同。前端渲染的组件拥有完整的生命周期，而后端渲染仅有 componentWillMount 的生命周期。这就意味着，如果我们想进行前后端共同操作的逻辑，如发送数据请求等，可以放在 componentWillMount 的生命周期中；如果想单独处理客户端的逻辑，可以放在其他生命周期，如 componentDidMount 中。

react-router

react-router是react的路由-视图控制库，可以书写边界的声明式路由以控制不同页面的渲染。react-router 本身是一个状态机，根据配置好的路由规则，和输入的 url 路径，通过 match 方法找到对应的组件并进行渲染。

这里写图片描述

这套机制在前端和后端都是相通的，例如在后端，就是下面这样一种实现形式来进行渲染：

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

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

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使用类型推断系统，导致在相同代码上的性能表现不同。