React源码——diff算法揭秘

Posted 2021-09-04 冷咖啡

React中的diff算法分两种

• 单一节点diff
• 多节点diff

diff算法的优化

• 只对同级的节点进行对比，如果新Fibre节点位置与之前相比跨越了层级就不会尝试复用，会直接构建新的Fibre节点

  -------oldFiber节点-------
    <div>
      <h3 key="a">标题</h3>
      <p key="b">
         <span>测试</span> 
       </p>
    </div>
    
  ------newFiber节点----
    <div>
      <h3 key="a">标题</h3>
      <span>测试</span>  // 跨域了层级，不会尝试复用，直接构建新的Fiber节点
    </div>
  

• 对于前后不同类型的html标签，比如div标签变成了p标签,React会删除之前的节点，构建新的Fiber节点

• 通过给元素设置key值，标识哪些元素可以最大限度的复用；当前后两次Fiber节点的类型和props属性(除了key值还有其他的prop属性)不变的情况，会交换Fiber节点的位置

  ------oldFiber---
    <div>
      <h3 key="a">标题</h3>
      <p key="b">dsflksj </p>
    </div>
    
  -----newFiber---
  <div>
      /**
      * 交换位置，Fiber节点的类型和props属性中的key没变;
      * 若key值没变，其他的prop属性改变，会构建新的Fiber
      */
      <p key="b">dsflksj </p> 
      <h3 key="a">标题</h3>
    </div>

触发diff算法的条件

• 当比较的两个元素key不同、Html标签类型不同、标签属性不同时会触发