react学习14-React 虚拟DOM介绍

虚拟DOM

• 为了提高网页的渲染性能，需要使浏览器尽可能少的更新DOM
• React的底层通过一种数据结构（其实就是对象{}）描述了DOM树的信息
• 其实每一个虚拟节点就是一个普通对象，用于描述真实的DOM元素
• 这样会形成一个虚拟DOM树—真实的DOM树
• 如果DOM元素对应的数据发生变化，那么虚拟DOM树会进行对比
• 更新后的DOM树会和更新前进行对比（diff）
• 对比的结果就是发生变化的虚拟节点集合
• 把上述虚拟节点（普通对象）转化为真实的DOM元素
• 把生成的真实DOM添加到页面

// vnode
var obj = {
  tagName : 'div',
  attrs: {className: 'active'},
  content: 'nihao'
}

// 把虚拟节点转化为真实的DOM节点
let element = document.createElement(obj.tagName);
element.class = obj.attrs.className;
element.innerHTML = obj.content;
div.appendChild(element);