美文网首页
React系列之diff算法

React系列之diff算法

作者: LTA | 来源:发表于2018-06-06 11:25 被阅读0次

React中render方法返回的并不是真实的DOM,而是一个轻量级的JS对象,Virtual DOM。React根据这个Virtual DOM计算出更新UI所需要的最少的DOM操作。

传统的diff算法

传统的diff算法通过循环递归对节点依次进行对比,效率低下,算法复杂度高达O(n^3), 其中n是树节点的总数。

React diff

React通过制定大胆的策略,将O(n^3)复杂度的问题转换成O(n)复杂度的问题

  • React 策略
    1)Web UI中DOM节点跨层级的移动操作特别少,可以忽略不计。
    2)拥有相同类的两个组件将会生成相似的DOM结构,拥有不同类的两个组件将会生成不同的DOM结构。
    3)同一层级的一组子节点,可以通过唯一的id进行区分。

参考链接

相关文章

  • React系列之diff算法

    React中render方法返回的并不是真实的DOM,而是一个轻量级的JS对象,Virtual DOM。React...

  • sammary

    vue-diff算法 react 性能优化 diff算法 ,局部更新DOMshouldComponentUpdat...

  • 到底React Fiber架构是个什么

    diff 算法缺陷 diff 算法问题出现在,React 的调度策略 -- Stack Reconfile。这...

  • react(其一)

     react、reactjs、react native、virtual dom、diff算法、redux....,...

  • react VS Vue diff算法

    react diff diff算法的作用:数据更改,生成相应的虚拟DOM,与真实DOM作对比,通过diff算法,对...

  • 面试

    1.React探索-diff算法 tree diff 基于策略一,React 对树的算法进行了简洁明了的优化,即对...

  • React diff算法

    传统的diff算法复杂度是O(n*3),而React diff算法改进了传统的diff算法,将算法复杂度降低到了O...

  • React之diff算法

    前言:在看《深入React技术栈》时,发现该书的语言不够通俗易懂,故整理之,希望在自己理解的基础上,进一步精炼语言...

  • React之Diff算法

    diff算法的作用计算出Virtual DOM中真正变化的部分,并只针对该部分进行原生DOM操作,而非重新渲染整个...

  • React diff算法

    React的diff算法是React更新组件的一个核心思想,搞懂了它的diff算法,会有助于你开发更高质量的代码,...

网友评论

      本文标题:React系列之diff算法

      本文链接:https://www.haomeiwen.com/subject/ldqbsftx.html