如何构建一个JavaScript虚拟DOM库？

：为什么需要虚拟 DOM？

痛点一：直接操作真实 DOM 代码冗长。逻辑分散，维护成本高，

痛点二：频繁的 DOM 更新导致页面卡顿，性能难以保障。

痛点三：手动比对新旧节点时容易出错，调试过程异常痛苦。

虚拟 DOM 正是为了解决上述问题而生——它用轻量的 JavaScript 对象描述 UI 树。找出最小变更，再一次性更新真实 DOM，从而提高开发效率和渲染性能。

说到主要概念，VNode 与 h 函数

什么是 VNode？话说回来，

每个 VNode是对真实 DOM 元素的抽象描述，包含以下三个关键属性：

• tag标签名，如 'div'
• props属性对象，如 { id: 'app',className: 'container' }
• children子节点数组。