详解操作虚拟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 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
分享一则JavaScript滚动条插件源码
Mar 03 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 Javascript
js实现仿阿里巴巴城市选择框效果实例
Jun 24 Javascript
在JavaScript应用中实现延迟加载的方法
Jun 25 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Bootstrap与Angularjs的模态框实例代码
Aug 03 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
node事件循环和process模块实例分析
Feb 14 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
解析php5配置使用pdo
2013/07/03 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
2015/07/27 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
js中常用的Tab切换效果(推荐)
2016/08/30 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Python基础教程之利用期物处理并发
2018/03/29 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
实例介绍Python中整型
2019/02/11 Python
python实现电子书翻页小程序
2019/07/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python读取xml文件方法解析
2020/08/04 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
办理护照介绍信
2014/01/16 职场文书
文明礼仪标语
2014/06/13 职场文书
四查四看整改措施
2014/09/19 职场文书
未婚证明范本
2015/06/15 职场文书
初中生物教学随笔
2015/08/15 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL