浅谈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 相关文章推荐
js apply/call/caller/callee/bind使用方法与区别分析
Oct 28 Javascript
jquery插件之easing 动态菜单
Aug 21 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
js实现目录定位正文示例
Nov 14 Javascript
JS中表单的使用小结
Jan 11 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
vue中的过滤器实例代码详解
Jun 06 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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 magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
php读取csc文件并输出
2015/05/21 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
php身份证号码检查类实例
2015/06/18 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
JS支持带x身份证号码验证函数
2008/08/10 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
jquery PrintArea 实现票据的套打功能(代码)
2017/03/17 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
详解vue axios中文文档
2017/09/12 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
Vue使用NProgress进度条的方法
2019/09/21 Javascript
js实现点击烟花特效
2020/10/14 Javascript
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python实现将元组中的元素作为参数传入函数的操作
2020/06/05 Python
蔻驰法国官网:COACH法国
2018/11/14 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
小学班主任培训方案
2014/06/04 职场文书
党员个人自我评价
2015/03/03 职场文书
道歉信范文
2015/05/12 职场文书
全新239军机修复记
2022/04/05 无线电
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers