浅谈react前后端同构渲染


Posted in Javascript onSeptember 20, 2017

前后端同构渲染:当客户端请求一个包含React组件页面的时候,服务端首先响应输出这个页面,客户端和服务端有了第一次交互。然后,如果加载组件的过程需要向服务端发出Ajax请求等,客户端和服务端又进行了一次交互,这样,耗时相对较长。前后端同构渲染可以在页面初次加载时把所有地方渲染好一次性响应给客户端

实现方式:保证包管理工具和模块依赖方式一致

包管理工具-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)放上占位符

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

以上,当客户端发出首次请求,服务端渲染出组件的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>

 <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,把组件渲染过程赋值给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')); 
}

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

express.js,服务端

以上,需要直出的页面有了占位符,定义了组件,并把渲染组件的过程赋值给了window对象,服务端现在要做的工作就是:生成组件的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('###', '<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"
},

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中Eval函数的使用说明
Oct 11 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 Javascript
Javascript实现简易天数计算器
May 18 Javascript
JS array数组检测方式解析
May 19 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
Sep 17 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 #Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 #Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 #Javascript
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
You might like
用cookies来跟踪识别用户
2006/10/09 PHP
php长字符串定义方法
2012/07/12 PHP
支持png透明图片的php生成缩略图类分享
2015/02/08 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
原型方法的不同写法居然会影响调试的解决方法
2007/03/08 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
js轮盘抽奖实例分析
2020/04/17 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Python封装shell命令实例分析
2015/05/05 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python使用Flask操作mysql实现登录功能
2018/05/14 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python OpenCV实现视频分帧
2019/06/01 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
Django实现将一个字典传到前端显示出来
2020/04/03 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
电脑教师的自我评价
2013/12/18 职场文书
列车长先进事迹材料
2014/01/25 职场文书
DIY手工制作经营店创业计划书
2014/02/01 职场文书
函授本科自我鉴定
2014/02/04 职场文书
企业承诺书格式
2014/05/21 职场文书
爱国口号
2014/06/19 职场文书
校运会通讯稿
2015/07/18 职场文书
《猴王出世》教学反思
2016/02/23 职场文书