详解操作虚拟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中的继承实例代码
Apr 27 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
js实现自动播放匀速轮播图
Feb 06 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 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函数in_array()使用详解
2014/08/20 PHP
php格式化日期实例分析
2014/11/12 PHP
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
2013/11/19 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
vue中的inject学习教程
2019/04/24 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
python实现封装得到virustotal扫描结果
2014/10/05 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python对json的相关操作实例详解
2017/01/04 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python 整数越界问题详解
2019/06/27 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
华为慧通面试题
2012/09/11 面试题
后勤采购员岗位职责
2013/12/19 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
质量提升方案
2014/06/16 职场文书
合作意向书范本
2019/04/17 职场文书
python爬虫框架feapde的使用简介
2021/04/20 Python
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
python异常中else的实例用法
2021/06/15 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB