前言
react的特点之一,就是通过虚拟DOM技术与diff算法的结合,网页性能的极大提高。
在页面开始的时候,React会调用render函数构建一颗Dom树,在组件的props/state改变时,React会再次调用render函数构建一颗虚拟DOM树,与原来的DOM树用diff算法来进行比较,得到DOM结构变化的部分,然后将变化部分操作到真实DOM中。整个过程都是在内存中进行,因此减少了对DOM的频繁操作,从而提升性能,变得高效。
传统的diff 算法
diff算法并非react首创,传统的diff 算法通过循环递归对节点进行依次比较,效率低下,算法复杂度达到 O(n^3),其中 n 是树中节点的总数。对此有兴趣的同学可参考:传统diff 算法
React的diff算法
如果React只是引入传统的diff算法,而没有进行任何改动,优化,那么即使在现在的cpu性能模式下,这种性能效率对前端渲染来说也远达不到要求。
但是值得称道的是,React基于两个假设,大大提高了diff算法的性能:
- 两个相同的组件会产生两个类似的DOM结构,两个不同的组件会产生两个不同的DOM结构。
- 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。
基于这两个假设, 将算法的复杂度由O(n^3)变成了O(n)。极大的提高了效率。