react diff 学习之tree diff

tree diff主要针对的是react dom节点跨层级的操作。什么是跨层级的操作呢？

除同级之外的操作都是跨层级。比如A节点下有B和C，A的同级有个小狗节点，现在把整个A节点移到小狗节点下。

对于这种跨层级操作，react只会进行创建和删除操作，当根节点发现子节点A消失了，就会直接销毁A，当小狗节点发现多了一个子节点A，则会创建新的A（包括它的子节点B和C）。此时,diff的执行情况：createA  →createB →createC →deleteA 。

由此可以发现，当出现跨层级移动时，并不会出现想象中的移动操作，而是以A为根节点的整个树被重新创建。这是一种影响React性能的操作，因此官方不建议进行DOM节点跨层级的操作。

那么从这里我们可以得到一个启示，什么启示呢？尽量用css来显示或者隐藏节点，而不是真正地移除或者添加dom节点。