Diff算法

Diff算法(Different算法):对比两个DOM树
Diff分为三个过程:tree diff、component diff、element diff。

react学习之diff算法理解

tree diff

新旧两个DOM树,逐层对比的过程;当整个DOM树逐层对比完毕,则所有需要被更新的元素必然能被找到;

component diff

在进行Tree Diff的时候,每一层中,组件级别的对比。

  1. 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
  2. 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上;

element diff

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

相关文章: