为什么react这么快呢 

  因为react用了虚拟DOM;

  但是每次虚拟DOM转真实DOM不也是很浪费性能吗

  nice,所以关键点在Diff算法这里,去对比新旧DOM树,而后通过补丁去更新到真实DOM上

  这个比对不是也很浪费时间吗

  正常情况下,比较两个树形结构差异的算法的时间复杂度是O(N^3),这个效率显然是无法接受的。

  react通过总结DOM的实际使用场景提出了两个在绝大多数实践场景下都成立的假设,基于这两个假设,React实现了在O(N)时间复杂度内完成两棵虚拟DOM树的比较。

  两个假设是:

    (1)如果两个元素的类型不同,那么它们将生成两棵不同的树;

    (2)为列表中的元素设置key属性,用key标识对应的元素在多次;

  面对性能优化我们能做什么呢

    1、使用生产环境版本的库;

     2、避免不必要的组件渲染;

     3、使用key;  

  

  

react diff 极简版的更多相关文章

  1. Underscore源码阅读极简版入门

    看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...

  2. js消除小游戏(极简版)

    js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...

  3. SimpleThreadPool极简版

    package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...

  4. 极简版 react+webpack 脚手架

    目录结构 asset/ css/ img/ src/ entry.js ------------------------ 入口文件 .babelrc index.html package.json w ...

  5. Vue Virtual Dom 和 Diff原理(面试必备) 极简版

    我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂  没懂再来一张 ...

  6. 极简版ASP.NET Core学习路径及教程

    绝承认这是一个七天速成教程,即使有这个效果,我也不愿意接受这个名字.嗯. 这个路径分为两块: 实践入门 理论延伸 有了ASP.NET以及C#的知识以及项目经验,我们几乎可以不再需要了解任何新的知识就开 ...

  7. 【极简版】SpringBoot+SpringData JPA 管理系统

    前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在上一篇中已经讲解了如何从零搭建一个SpringBo ...

  8. react实现极简搜索框效果

    hover.css内容 * { margin:; padding:; } li.hover { background: #ccc; color: darkgreen; } js内容 import Re ...

  9. 【极简版】OpenGL 超级宝典(第五版)环境配置 VS2010

    事先声明:该教程仅适用于VS2010环境下超级宝典第五版的配置 第一步:下载示例代码和环境包: 链接:https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw 提 ...

随机推荐

  1. Berry 指令设计

    Berry 脚本源代码需要被编译为字节码指令流才能被 Berry 虚拟机执行.本文将详细地讲解 Berry 字节码指令(下面简称指令)的设计和实现.为了达到这个目的,本文由 3 部分构成:第 1 小节 ...

  2. 16_TLB与流水线

    1 前面做的实验起始有缺陷 访问内存之后,后面执行两句代码后:并不能保证刚才访问的代码还在TLB中:有可能被刷新出去了: 实验验证缺陷: 代码 不连续 TLB 被淘汰: 2万次中有1次被淘汰:由于访问 ...

  3. 【线段树】[Luogu P4198]楼房修建

    显然要维护斜率区间单调递增 并且第一个必选,后一个比前一个选中的斜率大的必选 考虑如何合并两个区间 我们维护一个least值,least这个值必选,且之后选的都必须严格大于least,Push_Up的 ...

  4. zjoi 2008 树的统计——树链剖分

    比较基础的一道树链剖分的题 大概还是得说说思路 树链剖分是将树剖成很多条链,比较常见的剖法是按儿子的size来剖分,剖分完后对于这课树的询问用线段树维护——比如求路径和的话——随着他们各自的链向上走, ...

  5. Kafka命令行操作

    Kafka命令行操作 1)查看当前服务器中的所有topic [bingo@hadoop101 kafka]$ bin/kafka-topics.sh --list --zookeeper hadoop ...

  6. 牛客多校第六场 G Is Today Friday? 蔡勒公式/排列

    题意: 有一堆日期,这些日期都是星期五,但是数字被映射成了字母A~J,现在让你求逆映射,如果存在多种答案,输出字典序最小的那个. 题解: 用蔡勒公式解决关于星期几的问题. 对于映射,可以用笔者刚刚学会 ...

  7. Unity 如何修改 particle system 的 start color 属性

    代码如下: ParticleSystem ps = GetComponent<ParticleSystem>(); var main = ps.main; var color = Colo ...

  8. access数据库调用

    1.工程环境配置(vs+qt) 点击项目,右键,选择项目设置,选择SQL 2.获取自己数据库的驱动版本有哪些,如下代码所示: QStringList drivers = QSqlDatabase::d ...

  9. USACO 2011 February Silver Cow Line /// 康拓展开模板题 oj22713

    题目大意: 输入n k,1-n的排列,k次操作 操作P:输入一个m 输出第m个排列 操作Q:输入一个排列 输出它是第几个排列 Sample Input 5 2P3Q1 2 5 3 4 Sample O ...

  10. Java基础知识之常见关键字以及概念总结

    static 特点: 随着类的加载而加载 优先于对象存在 被所有对象所共享 可以直接被类名调用 使用注意: 静态方法只能访问静态成员 但是非静态成员可以直接访问静态成员 静态方法中不可用使用this, ...