详解操作虚拟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 js cookie的存储,获取和删除
Dec 29 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
Oct 10 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
js控制div弹出层实现方法
May 11 Javascript
图片懒加载插件实例分享(含解析)
Jan 09 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
详解vue-admin和后端(flask)分离结合的例子
Feb 12 Javascript
vue filters的使用详解
Jun 11 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
vue-router 控制路由权限的实现
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 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
jQuery maxlength文本字数限制插件
2010/04/16 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript实现短暂提示框功能
2018/04/04 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
[00:35]DOTA2上海特级锦标赛 Newbee战队宣传片
2016/03/03 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python计算两个日期相差天数的方法示例
2017/05/23 Python
Python生成器的使用方法和示例代码
2019/03/04 Python
python实现Virginia无密钥解密
2019/03/20 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
python3.7 sys模块的具体使用
2019/07/22 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
使用python绘制二维图形示例
2019/11/22 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
html5 application cache遇到的严重问题
2012/12/26 HTML / CSS
电气工程及自动化专业自荐书范文
2013/12/18 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
管理失职检讨书
2015/05/05 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
Nginx快速入门教程
2021/03/31 Servers
Python中使用ipython的详细教程
2021/06/22 Python
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis