React Diff理解

前言

一提到React，学过的人都会想到提升性能的两大神奇特点：虚拟DOM & diff算法。React diff做为Virtual DOM的加速器，其算法的改进优化是React整的界面渲染的基础，以及性能提升的保障。虽然开发中不须要知道其运行机制，可是理解以后有助于更好的理解React组件的生命周期，以及优化React程序。

React diff表示什么？表示React针对传统的diff算法进行了React风格的优化！

传统diff算法

计算一棵树形结构转换成另外一棵树形结构的最少操做，是一个复杂且值得研究的问题。

传统 diff 算法经过循环递归对节点进行依次对比，效率低下，算法复杂度达到 O(n^3)，其中 n 是树中节点的总数。O(n^3) 到底有多可怕，这意味着若是要展现1000个节点，就要依次执行上十亿次的比较。代价过高。

若是 React 只是单纯的引入 diff 算法而没有任何的优化改进，那么其效率是远远没法知足前端渲染所要求的性能。

所以，想要将 diff 思想引入 Virtual DOM，就须要设计一种稳定高效的 diff 算法，而 React 作到了！

那么，React diff 究竟是如何实现的呢？

React diff优化

传统的diff算法的复杂度为O(n^3),显然没法知足性能要求。Facebook工程师经过大胆的策略，将O(n^3)复杂度简化成了O(n),怎么作到的呢？

diff策略

• Web UI 中 DOM 节点跨层级的移动操做特别少，能够忽略不计。
• 拥有相同类的两个组件将会生成类似的树形结构，拥有不一样类的两个组件将会生成不一样的树形结构。
• 对于同一层级的一组子节点，它们能够经过惟一 id 进行区分。

基于以上三个前提策略，React团队对传统diff算法优化基于三个策略（《深刻React技术栈》等讲的确实有点难理解且模糊，这边通过理解给出了本身的理解）

• a->tree diff
• b->component diff
• c->element diffd

优化策略a: tree diff

基于tree diff策略，React对Virtual DOM树进行 分层比较、层级控制，只对相同颜色框内的节点进行比较(同一父节点的所有子节点)，当发现某一子节点不在了直接删除该节点以及其全部子节点，不会用于进一步的比较，在算法层面上就是说只须要遍历一次就能够了，而无需在进行没必要要的比较，便能完成整个DOM树的比较。

如图：

同属于分层比较、层级控制范畴，还会出现DOM节点跨层级的移动操做(React中这种状况DOM节点不稳定，损害性能，因此开发中不推荐这种状况的出现)，React diff怎么解决的呢？以下图状况：

上面描述的是同一层次不一样DOM节点范畴，React diff用趋近于‘暴力’的方式，并非把A B C 直接拼接到 D 节点上，而是删除A B C 三个节点以后在 D 下面在建立的 A B C。这里不作详细分析，想直观理解该过程，建议阅读这篇用在生命周期里打log的方式展现上述过程

优化策略b: component diff

React是基于组件构建应用的，对于组件间的比较所采用的策略也是简洁高效。

• 对于同一类型的组件，根据Virtual DOM是否变化也分两种，能够用shouldComponentUpdate()判断Virtual DOM是否发生了变化，若没有变化就不须要在进行diff，这样能够节省大量时间，若变化了，就对相关节点进行update
• 对于非同一类的组件，则将该组件判断为 dirty component，从而替换整个组件下的全部子节点。

以下图，当 component D 改变为 component G 时，即便这两个 component 结构类似，一旦 React 判断 D 和 G 是不一样类型的组件，就不会比较两者的结构，而是直接删除 component D，从新建立 component G 以及其子节点。虽然当两个 component 是不一样类型但结构类似时，React diff 会影响性能，但正如 React 官方博客所言：不一样类型的 component 是不多存在类似 DOM tree 的机会，所以这种极端因素很难在实现开发过程当中形成重大影响的。

而若是上图中左一中的D节点只是单纯的改变什么state，update就行了。

优化策略c: element diff

全部同一层级的子节点.他们均可以经过key来区分-----并遵循策略a、b。

没通过优化的算法，实现新老交替的方法是将A B C D所有删除以后，在新建B A D C，这样的实现方法显然很垃圾，React diff怎么优化呢？是经过为每个节点添加key值标识。

新老集合所包含的节点，如上图所示，新老集合进行 diff 差别化对比，经过 key 发现新老集合中的节点都是相同的节点，所以无需进行节点删除和建立，只须要将老集合中节点的位置进行移动，更新为新集合中节点的位置，此时 React 给出的 diff 结果为：B、D 不作任何操做，A、C 进行移动操做，便可。

上述分析的是新老集合中存在相同节点可是位置不一样，要是有新加入的节点且有旧节点须要删除呢？这里再也不啰嗦，以下图：

加了key的好处：

若是不加key，map遍历的时候控制台发出warn，既然是warn就说明不加也能实现遍历，可是是通过删除、建立、插入实现，这样的话损害性能可想而知，而加上key就能够有助于React diff算法结合Virtual DOM找到最合适的方式进行diff，最大限度的实现高效diff，即哪里须要改变，就改变哪里！

总结

• React 经过分层求异的策略，对 tree diff 进行算法优化；
• React 经过相同类生成类似树形结构，不一样类生成不一样树形结构的策略，对 component diff 进行算法优化；
• React 经过设置惟一 key的策略，对 element diff 进行算法优化；
• React 经过制定大胆的 diff 策略，将 O(n3) 复杂度的问题转换成 O(n) 复杂度的问题；
• 建议，开发时保持稳定的DOM结构有助于性能的提高；

参考

• 《深刻React技术栈》
• React 源码剖析系列 － 难以想象的 react diff
• 浅谈React diff算法与key