​

目录

🍉前言

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