浅谈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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
js 奇葩技巧之隐藏代码
Aug 11 Javascript
JavaScript递归算法生成树形菜单
Aug 15 Javascript
Angular实现表单验证功能
Nov 13 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 Javascript
Vuex,iView UI面包屑导航使用扩展详解
Nov 04 Javascript
单线程JavaScript实现异步过程详解
May 19 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
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
一张图带我们入门Python基础教程
2017/02/05 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
Python基础之文件读取的讲解
2019/02/16 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
python3.8下载及安装步骤详解
2020/01/15 Python
python与js主要区别点总结
2020/09/13 Python
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
会计人员演讲稿
2014/09/11 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
教师聘用意向书
2015/05/11 职场文书
技术入股协议书
2016/03/22 职场文书
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL