虚拟DOM的简单实现

1. 什么是虚拟DOM

虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象

2. 实现思路

  1. 用JS对象模拟DOM(虚拟DOM)
  2. 把此虚拟DOM转成真实DOM并插入页面中(render)
  3. 如果有事件发生修改了虚拟DOM,比较两棵虚拟DOM树的差异,得到差异对象(补丁数组)(diff)
  4. 把差异对象(补丁数组)应用到真正的DOM树上(patch)

3. 代码仓库

参考React官网,实现createElement等方法。为了省去热更新等配置,使用了yarn create react-app my-app --typescript构建项目。
详细直接看代码及注释
github