react渲染机制(虚拟DOM,diff算法)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/W_l_l/article/details/79705729

前言

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算法的性能:

  1. 两个相同的组件会产生两个类似的DOM结构,两个不同的组件会产生两个不同的DOM结构。
  2. 对于同一层级的一组子节点,它们可以通过唯一 id 进行区分。

基于这两个假设, 将算法的复杂度由O(n^3)变成了O(n)。极大的提高了效率。



没有更多推荐了,返回首页