通过编写简易版本的虚拟DOM,来理解虚拟DOM 的原理
作者:deathmood 译者:前端小智 来源:medium 点赞再看,养成习惯 本文 GitHub https://github.com/qq449245884/xiaozhi 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。 为了保证的可读性,本文采用意译而非直译。 要构建自己的虚拟DOM,需要知道两件事。你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂——但实际上,虚拟DOM的主要部分只需不到50行代码。 有两个概念: Virtual DOM 是真实DOM的映射 当虚拟 DOM 树中的某些节点改变时,会得到一个新的虚拟树。算法对这两棵树(新树和旧树)进行比较,找出差异,然后只需要在真实的 DOM 上做出相应的改变。 用JS对象模拟DOM树 首先,我们需要以某种方式将 DOM 树存储在内存中。可以使用普通的 JS 对象来做。假设我们有这样一棵树: <ul class=”list”> <li>item 1</li> <li>item 2</li> </ul> 看起来很简单,对吧? 如何用JS对象来表示呢? { type: ‘ul’, props: { ‘class’: ‘list’ }, children: [ { type: ‘li’,