虚拟DOM的原理看这篇文章就足够

1 虚拟DOM其实就是通过JS对象去实现真正的DOM渲染

在element.js文件中要实现如何创建虚拟DOM以及将创建出来的虚拟DOM渲染成真实的DOM
首先实现一下如何创建虚拟DOM，看代码：
// element.js

// 虚拟DOM元素的类，构建实例对象，用来描述DOM
class Element {
constructor(type, props, children) {
this.type = type;
this.props = props;
this.children = children;
}
}
// 创建虚拟DOM，返回虚拟节点(object)
function createElement(type, props, children) {
return new Element(type, props, children);
}
// 导出类和方法
export {
Element,
createElement
}

2 调用createElement方法

在主入口文件里，我们主要做的操作就是来创建一个DOM对象，渲染DOM以及通过diff后去打补丁更新DOM，不啰嗦了，直接看代码：
// index.js

// 首先引入对应的方法来创建虚拟DOM
import { createElement } from ‘./element’;

let virtualDom = createElement(‘ul’, {class: ‘list’}, [
createElement(‘li’, {class: ‘item’}, [‘周杰伦’]),
createElement(‘li’, {class: ‘item’}, [‘林俊杰’]),
createElement(‘li’, {class: ‘item’}, [‘王力宏’])
]);
console.log(virtualDom);
可以在运行环境看结果

3渲染虚拟DOM

// element.js

class Element {
// 省略
}

function createElement() {
// 省略
}

// render方法可以将虚拟DOM转化成真实DOM
function render(domObj) {
// 根据type类型来创建对应的元素
let el = document.createElement(domObj.type);

// 再去遍历props属性对象，然后给创建的元素el设置属性
for (let key in domObj.props) {
    // 设置属性的方法
    setAttr(el, key, domObj.props[key]);
}

// 遍历子节点
// 如果是虚拟DOM，就继续递归渲染
// 不是就代表是文本节点，直接创建
domObj.children.forEach(child => {
    child = (child instanceof Element) ? render(child) : document.createTextNode(child);
    // 添加到对应元素内
    el.appendChild(child);
});

return el;

}

// 设置属性
function setAttr(node, key, value) {
switch(key) {
case ‘value’:
// node是一个input或者textarea就直接设置其value即可
if (node.tagName.toLowerCase() === ‘input’ ||
node.tagName.toLowerCase() === ‘textarea’) {
node.value = value;
} else {
node.setAttribute(key, value);
}
break;
case ‘style’:
// 直接赋值行内样式
node.style.cssText = value;
break;
default:
node.setAttribute(key, value);
break;
}
}

// 将元素插入到页面内
function renderDom(el, target) {
target.appendChild(el);
}

export {
Element,
createElement,
render,
setAttr,
renderDom
};

4调用render方法

// index.js

// 引入createElement、render和renderDom方法
import { createElement, render, renderDom } from ‘./element’;

let virtualDom = createElement(‘ul’, {class: ‘list’}, [
createElement(‘li’, {class: ‘item’}, [‘周杰伦’]),
createElement(‘li’, {class: ‘item’}, [‘林俊杰’]),
createElement(‘li’, {class: ‘item’}, [‘王力宏’])
]);

console.log(virtualDom);

// +++
let el = render(virtualDom); // 渲染虚拟DOM得到真实的DOM结构
console.log(el);
// 直接将DOM添加到页面内
renderDom(el, document.getElementById(‘root’));
// +++
通过调用render方法转为真实DOM，并调用renderDom方法直接将DOM添加到了页面内 结束