function h(tag, props, children) {
  return {
    tag,
    props,
    children: Array.isArray(children) ? children : [children]
  };
}

function render(vnode) {
  if (typeof vnode === 'string') {
    return document.createTextNode(vnode);
  }

  const el = document.createElement(vnode.tag);

  // 设置属性
  if (vnode.props) {
    Object.keys(vnode.props).forEach(key => {
      el.setAttribute(key, vnode.props[key]);
    });
  }

  // 递归渲染子节点
  vnode.children.forEach(child => {
    el.appendChild(render(child));
  });

  return el;
}

function patch(oldVNode, newVNode) {
  const el = (newVNode.el = oldVNode.el);

  // 标签不同，直接替换
  if (oldVNode.tag !== newVNode.tag) {
    el.parentNode.replaceChild(render(newVNode), el);
    return;
  }

  // 更新属性
  const oldProps = oldVNode.props || {};
  const newProps = newVNode.props || {};
  for (const key in newProps) {
    if (oldProps[key] !== newProps[key]) {
      el.setAttribute(key, newProps[key]);
    }
  }
  for (const key in oldProps) {
    if (!(key in newProps)) {
      el.removeAttribute(key);
    }
  }

  // 比较子节点
  const oldChildren = oldVNode.children || [];
  const newChildren = newVNode.children || [];

  const len = Math.max(oldChildren.length, newChildren.length);
  for (let i = 0; i < len; i++) {
    const oldChild = oldChildren[i];
    const newChild = newChildren[i];

    // 新节点不存在，删除
    if (!newChild) {
      el.removeChild(el.childNodes[i]);
    }
    // 旧节点不存在，新增
    else if (!oldChild) {
      el.appendChild(render(newChild));
    }
    // 都存在，递归对比
    else {
      patch(oldChild, newChild);
    }
  }
}

// 初始VNode
const v1 = h('div', { id: 'app' }, [
  h('p', {}, 'Hello'),
  h('span', {}, 'World')
]);

// 新VNode
const v2 = h('div', { id: 'app' }, [
  h('p', {}, 'Hello'),
  h('span', {}, 'Virtual DOM')
]);

// 首次渲染
const container = document.getElementById('container');
container.appendChild(render(v1));

// 更新时执行Diff
setTimeout(() => {
  patch(v1, v2);
}, 1000);