zoukankan      html  css  js  c++  java
  • React的diff算法

    React的diff算法主要是两个Tree的比较。

    传统的Tree diff算法复杂度是O(n^3),React是算法通过一些策略将复杂度将为O(n).

    1. 优化策略

    1. 网页中的DOM跨层级移动的特别少,可以忽略不计
    2. 相同类型的组件生成相似的树形结构,不同类型的组件生成不同的树形结构
    3. 同一层级的节点,可以通过唯一id来区分

    2. 优化算法

    基于以上的策略,React对diff算法进行了一下优化

    1. tree diff

    只对同一层级的节点进行比较,跨层级移动,直接销毁子树,在目的节点完全插入子树,这样只需对树进行一次遍历,便能完成整个DOM树的比较

    2. component diff

    1. 同一类型组件,按照tree diff进行同级比较,并且增加了shouldComponentUpdate钩子来判断组件是否发生变化,无变化,不比较,从而节省diff时间
    2. 不同类型组件,将组件标记为dirty component,从而替换整个组件下的所有子节点

    3. element diff

    对于同一层级的element,通过唯一id,可以优化其新增,修改,删除操作


    在开发React组件时,保持DOM结构的稳定有助于提示性能。

    参考:https://segmentfault.com/a/1190000004913592
       https://segmentfault.com/a/1190000010686582

  • 相关阅读:
    linux常用命令-新手入门
    centos-1908安装步骤
    存储过程和函数的一些范例
    在iis7上如何配置来看到asp报错
    如何在ashx页面获取Session值
    SQL--create Table
    NET内存持续增长问题排查
    Socket之服务调用
    编程心得
    vs中无法查找或打开PDB文件
  • 原文地址:https://www.cnblogs.com/mengff/p/9867336.html
Copyright © 2011-2022 走看看