React源码——diff算法揭秘

本文主要是介绍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标签类型不同、标签属性不同时会触发

这篇关于React源码——diff算法揭秘的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！