虚拟DOM的简单实现
1. 什么是虚拟DOM
虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象
2. 实现思路
- 用JS对象模拟DOM(虚拟DOM)
- 把此虚拟DOM转成真实DOM并插入页面中(render)
- 如果有事件发生修改了虚拟DOM,比较两棵虚拟DOM树的差异,得到差异对象(补丁数组)(diff)
- 把差异对象(补丁数组)应用到真正的DOM树上(patch)
3. 代码仓库
参考React官网,实现createElement
等方法。为了省去热更新等配置,使用了yarn create react-app my-app --typescript
构建项目。
详细直接看代码及注释
github