react diff算法剖析总结

Posted 2020-09-08

原文：https://zhuanlan.zhihu.com/p/20346379

总结一下个人看完之后的理解：

1、tree diff：只对相同层级的节点进行比较，如果子树在新树种不存在了，则直接删除。如果新加了树就是创建，那么如果进行了跨层级的树的移动怎么办？答案是直接删除移动前的树，在移动后的位置创建一颗一模一样的。

所以在react中尽量还是不要进行跨层级的移动。

2、component diff：如果是相同的组件，则继续比较virtual DOM tree。如果不是，则直接删除整个组件并替换成相同的组件

3、element diff：有移动，创建和删除操作，这个不用说都直接什么意思。具体的算法细节可以看原文，这里不深究。