什么是虚拟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 值来判断元素与本地状态的关联关系