详解操作虚拟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 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
vue的diff算法知识点总结
Mar 29 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
微信小程序批量上传图片到七牛(推荐)
Dec 19 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实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
2013/05/13 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
Vue注册组件命名时不能用大写的原因浅析
2019/04/25 Javascript
javascript触发模拟鼠标点击事件
2019/06/26 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
python实现比较两段文本不同之处的方法
2015/05/30 Python
python实现linux下使用xcopy的方法
2015/06/28 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
秘书专业自荐信范文
2013/12/26 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Consul在linux环境的集群部署
2022/04/08 Servers