React Diff算法与传统的Diff算法理解

作者: Miaoz0070 | 来源:发表于2020-04-20 18:03 被阅读0次

React diff算法
react VS Vue diff算法
sammary
React Diff算法与传统的Diff算法理解
到底React Fiber架构是个什么
react项目优化
React基础3--diff算法
面试
9. diff算法的理解
react(其一)

平时都是搞框架搞业务写代码，没有静下心来去深层次的看一些东西，最近公司人员变动，便承担开始筛选简历面试，也开始让自己梳理了偏底层基础认知的内容。本章就来讲下React的Diff算法和传统Diff算法的不同及React的Diff算法都做了什么,怎么把时间复杂度从O(n^3)减少到O(n)？

Diff算法的作用：

用来计算出Virtual DOM中改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。

Diff算法三大策略：

Diff策略

1.Tree Diff ：Web UI中DOM节点跨层级的移动操作特别少，可以忽略不计
2.Component Diff：拥有相同类的俩个组件将会生成相似的树形结构，拥有不同类的俩个组件将会生成不同的树形结构
3.Element Diff：对于同一层级的一组子节点，它们可以通过唯一id进行区分

传统的Diff算法：

计算两颗树形结构差异并进行转换，循环递归每一个节点，其复杂度要达到O(n^3)，其中n是节点总数，例如1000个节点就要进行数10亿次的比较，效率十分低下。

比如左侧树每个节点与右侧树每个节点依次进行遍历对比(A->A、A->D、A->B、A->C ......)，时间复杂度O(n^2)，查找对比差异后计算最小的转换方式，最终时间复杂度为O(n3)。
上面两树的变化而言，若要达到最小更新，首先要对比每个节点是否相同，即：

PA->LA
PA->LB
PA->LC
PA->LD
PB->LA
...

React的Diff算法：

React把传统Diff的三个策略进行优化，将Diff复杂度从从O(n^3)降到了O(n)。
1.Tree Diff优化：
由于webUI中夸级移动操作非常少，可以忽略不计，React对Virtual DOM树进行层级控制，只会对同级DOM节点进行比较，即同一个父元素下的所有子节点，当发现节点已经不存在了，则会删除掉该节点下所有的子节点，不会再进行比较。这样只需要对DOM树进行一次遍历，就可以完成整个树的比较。复杂度变为O(n)。
疑问：当我们的DOM节点进行跨层级操作时，diff会有怎么样的表现呢？
当出现节点跨层级移动时，并不会出现想象中的移动操作，而是会进行删除，重新创建的动作，这是一种很影响React性能的操作。因此官方也不建议进行DOM节点跨层级的操作。

ReactDiff

2.Component Diff优化：
拥有相同类型的两个组件产生的DOM结构也是相似的，不同类型的两个组件产生的DOM结构则不近相同。
React是基于组件构建应用的，对于组件间的比较所采用的策略也是非常简洁和高效的。
如果是同一类型的组件，则按照原策略进行Virtual DOM比较。
如果不是同一类型的组件，则将其判断为dirty component，从而替换整个组件下的所有子节点。
如果是同一个类型的组件，有可能经过一轮Virtual DOM比较下，并没有发生变化。如果我们能够提前确切知道这一点，那么就可以省下大量的Diff运算时间。因此，React允许用户通过shouldComponentUpdate()来判断该组件是否需要进行Diff算法分析。
比如说当组件A变为组件B时，即使这两个组件结构相似，一旦React判断A和B是不用类型的组件，就不会比较两者的结构，而是直接删除组件A，重新创建组件B及其子节点。虽然当两个组件是不同类型但结构相似时，进行Diff算法分析会影响性能，但是毕竟不同类型的组件存在相似DOM树的情况在实际开发过程中很少出现，因此这种极端因素很难在实际开发过程中造成重大影响。

3.Element Diff优化：
对于同一层级的一组子节点，通过分配唯一唯一id进行区分（key值）。
当节点属于同一层级时，diff提供了3种节点操作，分别为INSERT_MARKUP(插入)，MOVE_EXISTING(移动)，REMOVE_NODE(删除)。
INSERT_MARKUP:新的组件类型不在旧集合中，即全新的节点，需要对新节点进行插入操作。
MOVE_EXISTING:旧集合中有新组件类型，且element是可更新的类型，这时候就需要做移动操作，可以复用以前的DOM节点。
REMOVE_NODE:旧组件类型，在新集合里也有，但对应的element不同则不能直接复用和更新，需要执行删除操作，或者旧组件不在新集合里的，也需要执行删除操作。

总结：

1.React通过制定自己的diff策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
<1>.React是如何将O(n3) 复杂度的问题转换成 O(n) ：
(1).只进行同级比较。
(2).不同类的React组件会被当做完全不同的DOM结构而被完全替换。
(3).key ：开发人员可以通过给Virtual DOM一个唯一的key属性暗示React这是同一个DOM结构，反之若key值不同则会被当做完全不同的DOM结构。
2.React通过分层求异的策略，对Tree Diff进行算法优化；
3.React通过相同类生成相似树形结构，不同类生成不同树形结构的策略，对Component Diff进行算法优化。
4.React通过设置唯一key的策略，对Element Diff进行算法优化；
注意：
5.开发组件要保持稳定的DOM结构会有助于性能的提升；
6.尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响React的渲染性能。
7.React的Diff算法是在render里面进行计算的。

以上是自己查找资料和自己的理解总结出的内容，如有错误地方，还望大家指正，相互探讨。