【前端知识体系梳理（三）】Diff策略

​

🍉前言

    React最为核心的就是虚拟DOM和Diff算法；

    React在内存中维护一颗虚拟DOM树，当数据发生改变时，会自动的去更新虚拟DOM，获得一个新的虚拟DOM，然后通过Diff算法，比较新旧虚拟DOM树，找出最小的有变化的部分，将这个变化的部分（Patch）加入队列，最终批量的更新这个Patch到实际DOM中；

🍉一、传统Diff算法

    传统的Diff算法的主要思想就是如何用最小的操作步数去修改DOM树；

    将一颗树通过最小操作步数映射到另一颗t树，这种算法叫做树编辑距离算法；

    这种传统Difff算法的最大缺点就是慢，性能极低，它的时间复杂度只能达到O(n^3);

🍉二、React Diff

    diff算法的本质就是：找出两个对象之间的差异，目的是尽可能做到节点复用。

    为了优化传统的diff算法，React提出了两个假设：

🌾🌾1、两个不同类型的元素会产生出不同的树

🌾🌾2、开发者可以通过key props 来暗示哪些子元素在不同的渲染下能保持稳定

    基于这上述两个假设，React针对性的提出了三个策略以对diff算法进行优化：

🌾🌾1、DOM节点跨层级的移动操作特别少，可以忽略不记

🌾🌾2、拥有相同类型的两个组件将会生成相似的树形结构，拥有不同类型的两个组件将会生成不同树形结构

🌾🌾3、对于同一层级的一组子节点，它们可以通过唯一key进行区分

    基于上述三个策略，react分别对以下三个部分进行了diff算法优化

🍓🍓🍓1、tree diff

    React只对虚拟DOM树进行分层比较，不考虑节点的跨层级比较，根据对比结果，进行节点的新增和删除，如此，只需要遍历一次虚拟DOM树，就可以完成整个对比；

    但是，如果出现了跨层级的操作，react是无法复用已有的节点，而是要整个删除，并重新创建，这会影响性能；所以react官方推荐尽量避免跨层级的操作；

🍓🍓🍓2、component diff

    React是基于组件构建的，对于组件间的比较所采用的的策略如下：

🌼1）、如果是同类型组件，首先使用shouldComponentUpdate()方法判断是否需要进行比较，如果返回为true，才比较对应的DOM节点，否则不需要比较

🌼2）、如果是不同类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点；

    比如说，现有两个组件一个A，一个B，虽然这两个组件结构相似，但是类型不同，React不会进行比较，会直接删除组件A，创建组件B；

🌼1）、对于不同类型的组件，默认不需要进行比较操作，直接重新创建

🌼2）、对于同类型的组件，通过让开发人员自定义shouldComponentUpdate()方法来进行比较优化，减少组件不必要的比较。如果没有自定义，shouldComponent()方法默认返回true，默认每次组件发生数据变化时都进行比较

🍓🍓🍓3、element diff

    element diff涉及三种操作：移动、创建、删除；对于同一层级的子节点，对于是否使用key分别进行讨论

🌾🌾🌾1）、不使用key的情况：

    React对新旧同一层级的子节点对比，发现新集合中的B不等于老集合中的A，于是删除A，创建B，依次类推，这样的话，前后相同的节点，都会因为顺序的不同而被删除和重新创建，从而影响性能；

🌾🌾🌾2）、使用key的情况：

    React首先会对新集合进行遍历，通过唯一key来判断老集合中是否存在相同的节点，如果没有则创建，如果存在，则判断是否需要进行移动操作，并且react对于移动操作也采取了一种很高效的算法；

    element diff就是通过唯一key来进行diff优化，通过复用已有的节点，减少节点的删除和创建操作；

    React通过指定对应的diff策略，将O(n^3)复杂度问题转换成O(n)的复杂度问题

🌼1）、通过分层对比策略，对tree diff进行算法优化

🌼2）、通过相同类生成相似树形结构，不同类生成不同树形结构以及shouldComponentUpdate策略，对Component diff进行算法优化

🌼3）、通过设置唯一key策略，对element diff进行算法优化

🍉三、fiber架构

    fiber是React16之后的一个虚拟DOM思想：

    fiber可以理解为一个执行单元，每次执行完一个执行单元，react就会检查现在还剩多少时间，如果没有时间则将控制权让出去；

    首先React向浏览器请求调度，浏览器在一帧中如果还有空闲时间，会去判断是否存在待执行的任务，不存在就直接将控制权交给浏览器，如果存在就会执行对应的任务，执行完成后回去判断是否还有事件，有时间且有待执行任务则会继续执行下一个任务，否则就会将控制权交给浏览器

    组织一个单元需要一个数据结构，用传统的虚拟DOM很难再分割，我们现在构造一个新的结构，我们称之为fiber；

    React Fiber就是采用链表实现的，每个虚拟DOM都可以表示为一个fiber；

    fiber内容比较多，这里就不多论述，后续会专门出一篇关于fiber的blog；

🍓结束语🏆

   🌾🌾🌾明天写webpack相关内容！！！