关于 tag 和 key 我可不可以这么理解

Question

• 课程里讲的

tag 和 key 相同 不再深度比较

我理解的意思是：不再像一般的没优化过的 diff 算法【时间复杂度为O(n^3)】那样, 不仅仅是相同节点比较，当节点相同时，还要不同节点进行比较

• 而优化过的 diff 算法【也就是用在前端的 ， 如 vue react 以及 snabbdom，因为dom树无需过深去比较】，如果 tag 和 key 相同，说明是节点没变【也就是 旧<div key='1'>children</div> 和 新<div key='1'>children</div> 是一样的没有更改】,就不用再拿 新的 div 和 旧的 div 的子元素 children节点 做比较，这其实是 优化后的 diff 算法原本的特性【只比较同级节点】
• snabbdom 的源码里边 tag 和 key 相同 还是会去 patch chilren元素，这里是正常的，并不是上边所说的 ‘深度比较’，他只是不去管这一对相同的节点，而是去比较他们的 children 节点，所以这里并非是算法意义上的 ‘深度比较’
  我看好多同学这里有疑问，我也是仔细琢磨了一遍才想明白，我的理解应该没问题吧？

Answer 1

双越 2021-06-04 18:37:32

没问题，非常棒！

而且这种把理解的内容写出来、分享出来的方式，也非常赞。既加深自己的理解，又惠及他人。

• 邓男子 #1

  我有个疑问，为什么tag和key相同就不比较了？div里的text变了不就不知道了吗

• 双越 回复 邓男子 #2

  这是一个算法的指导思想，实现上肯定有很多细节要考虑。

• 慕婉清8096975 回复 双越 #3

  key的作用应该是个tag一样的，只是在不同的时候做删除重建，而不是相同就不比较子节点了