详解操作虚拟dom模拟react视图渲染


Posted in Javascript onJuly 25, 2018

1.为什么要使用虚拟dom?

网页性能优化->尽量少操作DOM

2..虚拟DOM(Virtual DOM) VS js直接操作原生DOM(innerHTML)

function Raw() {
  var data = _buildData(),
    html = "";
  ...
  for(var i=0; i<data.length; i++) {
    var render = template;
    render = render.replace("{{className}}", "");
    render = render.replace("{{label}}", data[i].label);
    html += render;
  }
  ...
  container.innerHTML = html;
  ...
}

以下测试用例中虽然构造了一个包含1000个Tag的String,并把它添加到DOM树中,但是只做了一次DOM操作。然而,在实际开发过程中,这1000个元素更新可能分布在20个逻辑块中,每个逻辑块中包含50个元素,当页面需要更新时,都会引起DOM树的更新,上述代码就近似变成了如下格式:

function Raw() {
  var data = _buildData(), 
    html = ""; 
  ... 
  for(var i=0; i<data.length; i++) { 
    var render = template; 
    render = render.replace("{{className}}", ""); 
    render = render.replace("{{label}}", data[i].label); 
    html += render; 
    if(!(i % 50)) {
      container.innerHTML = html;
    }
  } 
  ... 
}

实际场景:实际是一个组件里经常包含多个局部视图,小小的状态变更都要重新构造整棵 DOM,性价比太低。需要更新页面较多局部视图的时候,这样的做法不可取。

3.MVVM模式和React的模板引擎。

  1. MVVM: Model-View-ViewModel MVVM 可以很好的降低我们维护状态 -> 视图的复杂程度(大大减少代码中的视图更新逻辑)。MV*模式:只要在模版中声明视图组件是和什么状态进行绑定的,双向绑定引擎就会在状态更新的时候自动。
  2. React渲染视图原理:React setState之后会将传入的参数对象与组件当前的状态合并,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。

4.Virtual DOM模拟ReactJS视图渲染大致逻辑:

// 1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: blue'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li')])
])

// 2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
  el('h1', {style: 'color: red'}, ['simple virtal dom']),
  el('p', ['Hello, virtual-dom']),
  el('ul', [el('li'), el('li')])
])

// 4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上应用变更
patch(root, patches)

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

Javascript 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
JavaScript获取用户所在城市及地理位置
Apr 21 Javascript
Element Input组件分析小结
Oct 11 Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 Javascript
浅析JS中回调函数及用法
Jul 25 #Javascript
详解使用mpvue开发github小程序总结
Jul 25 #Javascript
详解mpvue开发小程序小总结
Jul 25 #Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP学习之数组值的操作
2011/04/17 PHP
header跳转和include包含问题详解
2012/09/08 PHP
CI框架简单邮件发送类实例
2016/05/18 PHP
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
js截取函数(indexOf,join等)
2010/09/01 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
vuex actions传递多参数的处理方法
2018/09/18 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
详解JavaScript作用域和作用域链
2019/03/19 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
python连接mongodb集群方法详解
2020/02/13 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
python实现逻辑回归的示例
2020/10/09 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
公务员个人自我评价分享
2013/11/06 职场文书
简历里的自我评价范文
2014/02/24 职场文书
运动会方阵口号
2014/06/07 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
法院执行局工作总结
2015/08/11 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB