为什么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. Java泛型中extends和super的区别?

    <? extends T>和<? super T>是Java泛型中的"通配符(Wildcards)"和"边界(Bounds)"的概念. ...

  2. utmp, wtmp - 登 录 记 录(login records)

    SYNOPSIS[总览] #include DESCRIPTION[描述] utmp 文 件 用 于 记 录 当 前 系 统 用 户 是 哪 些 人. 但 是 实 际 的 人 数 可 能 比 这 个 ...

  3. 关于hadoop多次format之后,会出现的dataNode消失问题

    如标题,最近我由于想初始化以下hadoop集群,之后却发现启动集群后所有的DataNode都消失了. 问题查找: 由于时所有的DataNode都出了问题,于是我翻找了以下DataNode的日志(默认在 ...

  4. Oracle之数据类型问题

    做项目涉及到Oracle数据库中数据类型:字符串型的问题 我不太清楚varchar(32)到底代表着什么? 通过搜索了解到:oracle中有三种常用的类型:varchar2(byte),varchar ...

  5. pandas读书笔记 算数运算和数据对齐

    pandas最重要的一个功能是,它可以对不同索引的对象进行算数运算.在对象相加时,如果存在不同的索引对,则结果的索引就是该索引对的并集. Series s1=Series([,3.4,1.5],ind ...

  6. scip 练习2.18

    (define (append a b ) (if (null? a )b (cons (car a) (append (cdr a) b)))) (define (reverse l) (appen ...

  7. python中while与else的联姻

    循环使用 else 语句在 python 中,for … else 表示这样的意思,for 中的语句和普通的没有区别,else 中的语句会在循环正常执行完(即 for 不是通过 break 跳出而中断 ...

  8. Tools: windbg 使用指南

    windbg使用 符号表C:\Symbols; SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols 系统变量_NT_SYMBOL_PAT ...

  9. Cacti 发送警告邮件

    Cacti版本: 0.8.8a 目的:监听CPU 高于1个设定值时发送警告邮件(范例这一台主机有1颗实体CPU,总共2核心) 需要安装的插件: 1.1. thold Threshold,下载使用的是v ...

  10. CSIC_716_20191127【组合,封装、类的私有属性方法、property装饰器】

    组合 what?   组合是指一个对象中,包含另一个或多个对象. why?      减少代码的冗余. How?     在类中加入其他类的对象,实现跨类对象之间的联动. 耦合度  软件设计要 高内聚 ...