浅谈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 相关文章推荐
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
Javascript中的高阶函数介绍
Mar 15 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 Javascript
Angular实现form自动布局
Jan 28 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
vue-resourse将json数据输出实例
Mar 08 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
模仿OSO的论坛(二)
2006/10/09 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
PHP如何防止用户重复提交表单
2020/12/09 PHP
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
javascript 封装Date日期类实例详解
2017/05/28 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
Python函数中定义参数的四种方式
2014/11/30 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
python抓取网页中链接的静态图片
2018/01/29 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
python实现网页录音效果
2020/10/26 Python
Yahoo-PHP面试题3
2012/01/14 面试题
公司前台辞职报告
2014/01/19 职场文书
自立自强的名人事例
2014/02/10 职场文书
马智宇结婚主持词
2014/04/01 职场文书
英语求职信范文
2014/05/23 职场文书
车辆管理制度范本
2015/08/05 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
如何写好竞聘报告
2019/04/03 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS