详解操作虚拟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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
微信小程序上传文件到阿里OSS教程
May 20 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
js实现聊天对话框
Feb 08 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
js常用函数 不错
2006/09/08 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
2011/11/04 Javascript
基于jquery实现状态限定编辑的代码
2012/02/11 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
matplotlib绘制动画代码示例
2018/01/02 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
python的pip有什么用
2020/06/17 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
出国英文推荐信
2014/05/10 职场文书
销售人员工作自我评价
2014/09/21 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
uniapp开发小程序的经验总结
2021/04/08 Javascript
python多线程方法详解
2022/01/18 Python
Redis分布式锁的7种实现
2022/04/01 Redis
vue自定义右键菜单之全局实现
2022/04/09 Vue.js