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