React diff算法

React diff算法

React通过引入虚拟dom的概念，避免了无效的dom操作，提高了dom的构建效率，为了高效的对比新旧虚拟dom树的异同引入了diff算法，react对diff算法进行了自己的优化，virtual Dom + diff；

diff算法策略分为，tree diff，component diff,element diff

React对以上三种策略进行了自己的优化

• 1）tree diff

对树进行分层比较，两棵树只会对同一层次的节点进行比较，因为dom节点跨层级的操作很少，react只会对同一父节点下的子节点进行比较，如果发现子节点不存在直接删除，不会往下比较

• 2）component diff

如果是同一类型的组件，进行element diff策略比较

如果不是同一类型的组件，就把该组件标记为dirty component，替换这个组件的所有子节点

对于同一类型的组件，有可能virtual dom没有任何变化，如果可以知道这点就会减少diff比较的时间，所以React提供了shouldComponentUpdate来判断组件是否需要diff

• 3）element diff

当节点处于同一层级时，diff提供了插入，移动，删除节点的操作

当新的组件类型不在旧的集合里面的时候，直接进行插入操作

当新的组件在老集合里面，element可以更新，就移动，可以复用以前的节点

老的组件类型，在新的集合里面也有，但是对应的元素不同，不能直接复用和更新，就删除，或者老的组件不在新的集合里面也删除