​

目录

🍉前言

🍉传统Diff算法

🍉React Diff

🍓🍓🍓1
    
    
    
、tree diff

🍓🍓🍓2     


     


     


     、component diff

🍓🍓🍓3 




 




 




 



、element diff

🌾🌾🌾1）

   

   

   

、不使用key的情况：

🌾🌾🌾2）     

     

     

    、使用key的情况：

🍉fiber架构

🍓结束语🏆

🍉前言

        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相关内容！！！