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