react（2）——之diff算法理解

Diff算法

Diff算法（Different算法）：对比两个DOM树
Diff分为三个过程：tree diff、component diff、element diff。

tree diff

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

component diff

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

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

element diff

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