为什么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. 利用ffmpeg进行视频软解播放

    前段时间,公司的一个项目需要一个rtsp的播放库,原本打算直接用vlc播放的,但我觉得vlc太庞大了,很多功能没必要,还不如用ffmpeg+d3d简单的实现一个库,因此就有了今天讲的这个东西.一个解码 ...

  2. Echart中X轴为时间坐标刻度时,后台返回时间List被强制转化为时间戳问题

    if(recordlist!=null&&recordlist.size()>0) { for (Record record : recordlist) { //根据频次决定使用 ...

  3. jq-demo-拖拽

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Redis探索之路(三):Redis的五种数据类型String和Hash

    一:String 存储二进制数据,可以图片,序列化对象 GET,SET SETNX(not exist)  setnx age 33 返回 0,1 SETEX设置有效期   SETEX COLOR 2 ...

  5. unity 打包Apk生成签名证书keystore

    进行Android项目开发中想要将androidapp导出为apk的时候需要选择一个数字证书,即keystore文件(android.keystore),它用来对我们的APP进行签名,是导出APP的一 ...

  6. js基础用法 ,基础语法

    js用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 <body> 和 <head& ...

  7. 2018年阿里云NoSQL数据库大事盘点

    NoSQL一词最早出现在1998年.2009年Last.fm的Johan Oskarsson发起了一次关于分布式开源数据库的讨论,来自Rackspace的Eric Evans再次提出了NoSQL概念, ...

  8. Prometheus监控node-exporter常用指标含义

    一.说明 最近使用Prometheus新搭建监控系统时候发现内存采集时centos6和centos7下内存监控指标采集计算公式不相同,最后采用统一计算方法并整理计算公式如下: 1 100-(node_ ...

  9. delphi DrawText 的用法

    DrawText(hDC: HDC; {设备句柄}lpString: PChar; {文本}nCount: Integer; {要绘制的字符个数; -1 表示全部}var lpRect: TRect; ...

  10. 在WinDBG中查看内存的命令

    当我们在调试器中分析问题时, 经常需要查看不同内存块的内容以分析产生的原因, 并且在随后验证所做出的假设是否正确. 由于各个对象的状态都是保存在内存中的, 因此内存的内容也就相当于对象的状态. d命令 ...