zoukankan      html  css  js  c++  java
  • React Diff算法

      Web界面由DOM树来构成,当其中某一部分发生变化时,其实就是对应的某个DOM节点发生了变化。在React中,构建UI界面的思路是由当前状态决定界面。前后两个状态就对应两套界面,然后由React来比较两个界面的区别,这就需要对DOM树进行Diff算法分析。

      即给定任意两棵树,找到最少的转换步骤。但是标准的的Diff算法复杂度需要O(n^3),这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的,势必需要对算法进行优化。这看上去非常有难度,然而Facebook工程师却做到了,他们结合Web界面的特点做出了两个简单的假设,使得Diff算法复杂度直接降低到O(n)。

      当一个节点从div变成span时,简单的直接删除div节点,并插入一个新的span节点。这符合我们对真实DOM操作的理解。需要注意的是,删除节点意味着彻底销毁该节点,而不是再后续的比较中再去看是否有另外一个节点等同于该删除的节点。如果该删除的节点之下有子节点,那么这些子节点也会被完全删除,它们也不会用于后面的比较。这也是算法复杂能够降低到O(n)的原因。

      React的DOM Diff算法实际上只会对树进行逐层比较。

       http://www.infoq.com/cn/articles/react-dom-diff?from=timeline&isappinstalled=0

  • 相关阅读:
    true和false
    计算几何算法概览
    pixi.js 总结
    typescript 不用import?
    nodejs 新特性
    p2 碰撞
    Java学习笔记(十四)——Java静态工厂
    Java学习笔记(十三一)——Xml 常用知识总结
    读书笔记(二) ——《恶意》你善良吗?
    Spring学习(二)——Spring中的AOP的初步理解
  • 原文地址:https://www.cnblogs.com/mooniitt/p/6064749.html
Copyright © 2011-2022 走看看