关于javascript:React源码diff算法揭秘

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标签类型不同、标签属性不同时会触发