场景计算两个树结构的差异并进行转换文中提到的n代表节点数。传统Diff算法处理方案：循环递归传统diff每个节点如上图，左树a节点依次比较如下：a->e,a->d,a->b,a->c,a->a,然后左边树的其他节点b,c,d,e也和右边树的每个节点比较。算法复杂度可以达到O(n^2)，求差后需要计算最小转换法。实现的算法复杂度为O(n^3)。将两棵树中的所有节点一一比较需要O(n2)的复杂度。比较过程中，发现新树中??没有找到旧节点，则需要删除旧节点。删除树的一个节点（找到合适的节点删除）的时间复杂度是O(n)。同样，增加一个新节点的复杂度也是O(n)。似乎diffing两棵树的复杂度是O(n3)优化的Diff算法。vue和react的虚拟DOM的diff算法大致相同。它的核心是基于两个简单的假设：两个相同的组件产生相似的DOM结构，不同的组件产生不同的DOM结构同一层级的一组节点，它们可以通过唯一的id区分（优化）diff三点策略：在在webUI中，DOM节点跨层级的移动操作非常小，可以忽略不计。两个相同类型的组件会生成相似的树结构，两个不同类型的组件会生成不同的树结构。对于同一层级的一组自节点，可以通过唯一的id来区分。即只会在同一层进行比较，不会跨层进行比较。React基于diff的上述优化三点策略对Diff算法进行优化，React进行如下算法优化treediffcomponentdiffelementdifftreediffreact进行树算法的层次比较。React使用updateDepth来控制VirtualDom树的层级，只比较相同颜色框内的节点，即同一父节点下的所有子节点。当发现该节点不存在时，将删除该节点及其子节点。这样，需要遍历一次dom树，就完成了整个dom树的比较。如果img是跨级移动操作，如图，当根节点发现A消失了，就会删除A和他的img。子节点。当发现D上多了一个A节点时，会创建A（包括它的子节点）作为子节点。因此：在进行跨级移动操作时，react并不是简单的移动，而是删除和创建操作，这将影响反应性能。所以尽量避免跨级操作。（比如：控制显示实现显示和隐藏，而不是实际增删dom）如果componentdiff是同类型的component，那么直接对比virtualDomtree。如果不是同一类型的组件，则直接替换该组件下的所有组件，如果子组件是同一类型，则虚拟DOM可能不会发生变化。在这种情况下，我们可以使用shouldComponentUpdate()来判断是否需要diffcomponentvsimg。如果组件D和组件G类型不同，但结构相似。在这种情况下，因为类型不同，react将删除D并创建G。因此我们可以使用shouldComponentUpdate()返回false而不进行差异。对于react15和16，引入了新的生命周期。所以：componentdiff主要使用shouldComponentUpdate()来优化elementdiff。元素差异涉及三个操作：插入、移动、删除。对比旧集合，发现新集合中的B不等于旧集合中的A，于是删除A，创建B，以此类推，直到删除旧集合中的D，创建C在新的集合中。=江子会造成渲染性能瓶颈，所以react允许添加key来区分key的使用imgreact首先遍历新集合，for(nameinnextChildren)，使用唯一key判断旧集合中是否存在同一个节点，如果not如果有，if(preChild===nextChild)执行移动操作。移动优化在移动之前，节点在新集合中的位置会与旧集合中的lastIndex进行比较。如果(child._mountIndex
