virtul DOM 也就是虚拟节点。通过JS的Object对象模拟DOM中的真实节点对象，再通过特定的render方法将其渲染成真实的DOM节点。
一、渲染步骤
生成vNode---->渲染成真实节点 --------->挂载到页面--------->diff比较
1、模拟方法和渲染方法
需求，生成一个如下图所示的DOM结构
image.png
调用
let virtualDom1 = createElement('ul', {class: 'list'}, [
createElement('li', {class: 'item'}, ['a']),
createElement('li', {class: 'item'}, ['b']),
createElement('li', {class: 'item'}, ['c']),
])
let virtualDom2 = createElement('ul', {class: 'list'}, [
createElement('li', {class: 'item'}, ['1']),
createElement('li', {class: 'item'}, ['2']),
createElement('li', {class: 'item'}, ['3']),
])
let el = render(virtualDom);
renderDom(el, window.root);
let patchs = diff(virtualDom1, virtualDom2);
生成虚拟对象的方法createElement
function createElement(type, props, children) {
return new Element(type, props, children)
}
class Element{
constructor(type, props, children){
this.type = type;
this.props = props;
this.children = children
}
}
将虚拟对象渲染成真实DOM的render方法
//render方法将vNode转化成真实DOM
function render(eleObj){
//创建元素
let el = document.createElement(eleObj.type);
//设置属性
for(let key in eleObj.props) {
setAttr(el, key, eleObj.props[key]);
}
//递归渲染子元素
eleObj.children.foEach(child => {
child = child instanceof Element ? render(child) : document.createTextNode(child);
el.appendChild(child);
})
}
setAttr(node, key, value) {
switch(key) {
case 'value':
if (node.tagName.toUpperCase() === 'INPUT' || node.tagName.toUpperCase() === 'TEXTAREA') {
node.value = value;
}else {
node.setAttribute(key, value);
}
break;
case 'style':
node.style.cssText = value;
break;
default:
node.setAttribute(key, value);
break;
}
}
渲染节点到页面的方法renderDom
//将真实DOM渲染到页面
function renderDom(el, target) {
target.appendChild(el);
}
二、DOM DIFF 算法
1、核心思想
DOM DIFF 就是比较两个虚拟DOM的区别，实际上就是比较两个对象的区别。根据两个虚拟对象创建出补丁，描述改变的内容。将这个补丁用来更新DOM。
image.png
【注意】不会更改所有节点，只更改有改变的部分
2、DOM DIFF 两种优化策略
1）分层比较，一层一层比，不会跨级对比
2）如果一层的对象只是换了下位置，可以通过key值直接换位置。
2、算法实现
差异计算：先序深度优先遍历
image.png
规则：
1、若节点类型不相同，直接采用替换模式，{type:'REPLACE',newNode:newNode}
2、当节点类型相同时，去看一下属性是否相同，产生一个属性的补丁包，比如{type:'ATTRS',attrs:{class: 'list-group'}
3、新的DOM节点不存在，也返回一个不存在的补丁包{type:'REMOVE',index:XXX}
4、文本的变化{type:'TEXT', text:1}
DIff 算法
//diff 算法
let Index = 0;
function diff(oldTree, newTree) {
let patches = {};
let index = 0;
//递归数比较后的结果放到补丁包中
walk(oldTree, newTree, index, patches);
return patches;
}
function walk(oldTree, newTree, index, patches){
let currentPatch = [];//每个元素都有一个补丁对象
if (!newTree) {
currentPatch.push({type:'REMOVE', index})
}
if (isString(oldTree) && isString(newTree)) {
// 判断文本是否一致
if (oldTree !== newTree) {
currentPatch.push({type:'TEXT',text:newTree});
}
}else if(oldTree.type === newTree.type) {
//比较属性是否有更改
let attrs = diffAttr(oldTree.props, newTree.props);
if(Object.keys(attrs).length) {
currentPatch.push({type:'ATTRS', attrs});
}
// 如果有儿子节点，遍历子节点
diffChildren(oldTree.children, newTree.children, index, patches);
} else {
// 节点类型不同的时候，直接替换
currentPatch.push({type:'REPLACE', newTree});
}
// 当前元素有补丁的情况下，将元素和补丁对应起来，放到大补丁包中
if(currentPatch.length) {
patches[index] = currentPatch;
}
}
function diffAttr(oldAttrs, newAttrs) {
let patch = {};
for(let key in oldAttrs) {
if(oldAttrs[key] !== newAttrs[key]) {
patch[key] = newAttrs[key];//有可能是undefined，新节点没有旧节点的属性
}
}
for(let key in newAttrs) {
//老节点没有新节点的属性
if(! oldAttrs.hasOwnProperty(key)) {
patch[key] = newAttrs[key]
}
}
return patch;
}
function diffChildren(oldChildren, newChildren, index, patches){
// 比较老的第一个和新的第一个
oldChildren.forEach((child, idx) => {
// 记得索引得改
// Index 每次传递给walk时，index是递增的，所有节点都基于一个序号实现，因此需要维护一个全局Index
walk(child, newChildren[idx], ++Index, patches);
})
}
function isString(node) {
return Object.prototype.toString.call(node) === '[object string]';
}
function patch(node, patches) {
// 给某个元素打补丁
}
