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


Posted in Javascript onJanuary 05, 2018

什么叫前后端同构?

为了解决某些问题(比如SEO、提升渲染速度等)react 提供了2个方法在服务端生成一个HTML文本格式的字符串。在得到了这个HTML格式的字符串之后,通常会将其组装成一个页面直接返回给用户的浏览器。

到这里,服务端的活已经干完了,然后就是浏览器这边干活。

浏览器拿到HTML文本后,立刻进行渲染将内容呈现给用户。然后加载页面所需的 .js 文件,然后执行 JavaScript 脚本,然后开始初始化 react 组件…………

到这里问题就来了。react 初始化组件后会执行组件内所有 render () 方法,然后生成虚拟DOM的树形结构,然后在适当的时候将虚拟dom写到浏览器的真实dom中。因为 react 总是根据虚拟dom来生成真实dom,所以最后会把服务器端渲染好的HTML全部替换掉。

上面这个事情说不是问题确实也不是问题,无非就是用户看到页面然后“闪现”一下。说是问题还真是个问题,产品会拿着这毛病从用户体验的角度在各种场合和你死磕半个月。磕累了你索性把服务端渲染关了,然后运营又拿着SEO的问题准备和你开始撕逼了。

聪明如 Facebook 的工程师当然想到了这些问题,所以他们在ReactDOMServer.renderToString(element) 方法中提供了一个 checksum 机制。

关于 checksum 官网 并没有太多介绍,但是国内外的各路博客介绍了不少。我一直想找 react 开发者关于这个机制的介绍一直没找到……。

前后端同构就是保证前端和后端的dom结构一致,不会发生重复渲染。react 使用 checksum 机制进行保障。

什么叫React首屏渲染?

简单的说就是 react 在浏览器内存中第一次生成的虚拟 dom 树。切记是虚拟 dom ,而不是浏览器的dom。

了解 react 的应该知道,所有 react 组件都有一个 render() 方法(如果使用function方式编写的组件会把function里的所有代码都塞到 render() 方法中去)。当ReactDOM.render( element, container, [callback] )方法执行时,会执行以下步骤:

  1. 所有组件的会先进行初始化(es6执行构造函数)。
  2. 所有组件的 render () 方法会被调用一次,完成这个过程后会得到一颗虚拟的 dom 树。
  3.  react 会将虚拟dom转换成浏览器dom,完成后调用组件的 componentDidMount() 方法告诉你已经装载到浏览器上了。

在上面这个过程成中,步骤2完成后即为完成 react 的首屏渲染。结合 checksum 机制步骤3有可能不会执行。

当组件状态发生变更时( setState() 生命周期函数被调用)或者 父组件渲染时(父组件的 render() 方法被调用),当前组件的 render() 方法都会被执行,都有可能会导致虚拟dom变更,但是这些变更和首屏渲染没任何关系了。

React前后端同构首屏渲染

了解了同构和首屏渲染,就好理解如何解决首屏不重复渲染的问题了。

首先服务端渲染完之后会有一个 checksum 值写在根元素的属性上:

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

这个 checksum 是根据服务端生成的HTML内容哈希计算得到的。

然后在浏览器加载完所有的js文件之后,开始执行前面介绍的 ReactDOM.render( element, container, [callback] )  初始化渲染的三个步骤。当执行完第二步生成虚拟dom后,react 会根虚拟dom用相同的算法计算一个哈希值,如果和 checksum 一致则认为服务器已经完成渲染,不会再执行第三步。

如果 checksum 比对不一致,在 开发环境 和 测试环境 会在浏览器console中输出以下警告内容:

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

生产环境不会输出任何警告。

同构渲染的内容就这么多,原理其实蛮简单的,无非就是保证DOM一致。但是结合代码分片、异步加载、服务端调接口异步组装数据等等功能后,如何保证服务端和浏览器端第一次渲染的dom一致还得花不少功夫。不过原理清楚了,事情总能办成。

Javascript 相关文章推荐
IE6下JS动态设置图片src地址问题
Jan 08 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
Jan 24 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
浅析Javascript中bind()方法的使用与实现
May 30 Javascript
用原生js统计文本行数的简单示例
Aug 19 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 Javascript
详解Bootstrap 学习(一)入门
Apr 12 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 #Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 #Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 #Javascript
Vue组件的使用教程详解
Jan 05 #Javascript
基于three.js编写的一个项目类示例代码
Jan 05 #Javascript
js中this对象用法分析
Jan 05 #Javascript
Node中使用ES6语法的基础教程
Jan 05 #Javascript
You might like
php foreach循环中使用引用的问题
2013/11/06 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
angularjs点击图片放大实现上传图片预览
2017/02/24 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vuex提升学习篇
2018/01/11 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Web服务器框架 Tornado简介
2014/07/16 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
八大排序算法的Python实现
2021/01/28 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python秒算24点实现及原理详解
2019/07/29 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
python编程的核心知识点总结
2021/02/08 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
电大自我鉴定范文
2013/10/01 职场文书
计算机网络专业个人的自我评价
2013/10/17 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
小学班级口号
2014/06/09 职场文书
玄武湖导游词
2015/02/05 职场文书