怎样手写 h() 和 render，把虚拟 DOM 挂到真实 DOM 上？

function h(type, props, ...children) {
  return {
    type,
    props: props ?? {},
    // 子节点可能是嵌套数组（比如 map 的结果），也可能是字符串和数字，统一摊平后再处理。
    children: children
      .flat(Infinity)
      .filter((child) => child !== null && child !== undefined && child !== false && child !== true),
  };
}

function render(vnode, container, doc) {
  container.appendChild(createDom(vnode, doc));
}

function createDom(vnode, doc) {
  if (typeof vnode === 'string' || typeof vnode === 'number') {
    return doc.createTextNode(String(vnode));
  }
  const el = doc.createElement(vnode.type);
  for (const [key, value] of Object.entries(vnode.props)) {
    if (key.startsWith('on') && typeof value === 'function') {
      el.addEventListener(key.slice(2).toLowerCase(), value);
    } else if (key === 'className') {
      el.setAttribute('class', value);
    } else if (key === 'style' && typeof value === 'object') {
      for (const [name, v] of Object.entries(value)) el.style[name] = v;
    } else {
      el.setAttribute(key, String(value));
    }
  }
  for (const child of vnode.children) el.appendChild(createDom(child, doc));
  return el;
}

// 用来演示的极简 document，只实现 render 用到的几个方法。
function createFakeDocument() {
  function createElement(tagName) {
    return {
      tagName,
      attributes: {},
      style: {},
      childNodes: [],
      listeners: {},
      setAttribute(name, value) { this.attributes[name] = value; },
      appendChild(child) { this.childNodes.push(child); return child; },
      addEventListener(type, fn) { this.listeners[type] = fn; },
    };
  }
  return {
    createElement,
    createTextNode: (text) => ({ nodeType: 3, textContent: text }),
  };
}

function toHtml(node) {
  if (node.nodeType === 3) return node.textContent;
  const attrs = Object.entries(node.attributes).map(([k, v]) => ` ${k}="${v}"`).join('');
  const style = Object.entries(node.style).map(([k, v]) => `${k}:${v}`).join(';');
  const styleAttr = style ? ` style="${style}"` : '';
  return `<${node.tagName}${attrs}${styleAttr}>${node.childNodes.map(toHtml).join('')}</${node.tagName}>`;
}

const doc = createFakeDocument();
const root = doc.createElement('div');
let clicks = 0;
const items = ['苹果', '香蕉'];

const vnode = h('ul', { className: 'list', style: { color: 'red' } },
  items.map((item) => h('li', null, item)),
  false,
  h('li', { onClick: () => { clicks += 1; } }, '共 ', items.length, ' 项'),
);

render(vnode, root, doc);
const ul = root.childNodes[0];

console.log(toHtml(ul)); // <ul class="list" style="color:red"><li>苹果</li><li>香蕉</li><li>共 2 项</li></ul>
console.log(ul.childNodes.length); // 3
console.log(ul.childNodes[2].childNodes.length); // 3
ul.childNodes[2].listeners.click();
console.log(clicks); // 1