虚拟DOM的学习总结

什么是虚拟DOM？

　　就是虚拟创建的一个DOM对象。

为什么要有虚拟DOM？

　　我们要知道大部分浏览器的引擎工作流程都差不多，创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。

　　当你用原生js去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍，如果更新10次就重新渲染10次，导致很多没有必要的计算，这是十分耗费性能的。聪明的程序员为了解决这个问题，就引入了虚拟DOM这种设计思想。

　　若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地一个JS对象中，最终将这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量无谓的计算量。

 

JS对象模拟DOM节点的好处？

　　页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

diff算法的理解？

　　1、tree diff

　　新旧两颗DOM树，逐层对比的过程，就是Tree Diff；当整颗DOM树逐层对比完毕，则所有按需更新的元素都能找到

 

　　2、component  diff

　　在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff

　　如果对比前后，组件类型相同，则暂时认为此组件不需要更新；

　　如果对比前后，组件类型不同，则需要移除旧组件。创建新组建，并追加到页面上

 

　　3、element  diff

 　　在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这叫做element diff

key值作用？

　　1、key是React用于跟踪哪些元素是增加、删除、修改的辅助标记，需要保证在同级元素中key的唯一性

　　2、 React Diff 算法借助元素的 Key 值判断元素是新增、删除、修改，从而减少不必要的元素重渲染。

　　3、React 还需要借助 Key 值来判断元素与本地状态的关联关系