浅谈React中的虚拟DOM

虚拟DOM(diff算法)

为什么要使用虚拟DOM?

虚拟DOM是为了提高DOM渲染性能的,因为浏览器的DOM操作是最消耗性能的

把一个真实的DOM树转换成js对象树(createElment),当我们改变页面的时候,就会产生一个目标的对象树,两棵对象树进行比较,在内存中进行比较,比较出的不同点进行渲染

同级比较算法(一旦发现某个节点没有了,就删除这个节点;一旦发现新增了一个节点,就新增一个节点;遇到相同的节点则保留)

逐层比较算法的问题(简陋):

1.两棵树如果变化特别大,则次算法无效

2.如果兄弟节点特别多的时候,插入和排序则变得很低效

逐层比较算法的好处(高效):

1.算法的时间复杂度降低(由O(n^3)变为O(n))

两个假设

1.两个相同组件产生类似的DOM结构,不同的组件产生不同的DOM结构

2.对于同一层次的一组子节点,它们可以通过唯一的id进行区分

 

转载于:https://www.cnblogs.com/jsjx-xtfh/p/9960812.html