详解操作虚拟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 相关文章推荐
js验证表单大全
Nov 25 Javascript
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
JQuery特殊效果和链式调用操作示例
May 13 jQuery
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
JS防抖和节流实例解析
Sep 24 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 单引号与双引号的区别
2009/11/24 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
Vue中添加手机验证码组件功能操作方法
2017/12/07 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
2019/05/14 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
销售工作人员的自我评价分享
2013/11/10 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
国企干部对照检查材料
2014/08/22 职场文书
观后感开头
2015/06/19 职场文书
工商行政处罚决定书
2015/06/24 职场文书
《窃读记》教学反思
2016/02/18 职场文书
Java设计模式中的命令模式
2022/04/28 Java/Android