为什么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. springMvc框架之Restful风格

    method: @Controller @RequestMapping("/test") public String MyController{ @RequestMapping(& ...

  2. etc/profile /etc/bashrc ~/.bash_profile ~/.bashrc等配置文件区别

    什么是交互式shell和非交互式shell,什么是login shell 和non-login shell. 交互式模式:就是shell等待你的输入,并且执行你提交的命令.这种模式被称作交互式是因为s ...

  3. react-router v4 理解

    1.Router (1)最基础的路由器,必须有history属性 (2)BrowserRouter和HashRouter都是由Router组件扩展而来 2.BrowserRouter (1)Brows ...

  4. Saks就const解释

    In my last column, I discussed one of the reasons why the rules by which a compiler can place data i ...

  5. 解决vi显示文件不能全屏的问题

    https://blog.csdn.net/ly890700/article/details/52735092 docker外:   vi ~/.vimrc

  6. vue之父子组件执行对方的方法

    一.子组件执行父组件中的方法 1.父组件将方法名传给子组件,子组件进行调用 父组件中: <Vbutton typeBtn="success" :btnUserMethod=& ...

  7. react css拓展 使用less

    react 之中使用less 其实质只需要看一下resct 使用css的配置项,就能明白个大概了  第一步   还是下载 npm i  less less-loader -save 下载less 和 ...

  8. 微信小程序布局篇

    刚刚接触小程序,小程序与HTML5有一定的差别,小程序就几个标签,而HTML5一大堆标签,还不断更新,但是新增标签功能强大.做一下微信小程序的布局练练手.感觉还是挺不错的,也封装了很多东西功能出来,与 ...

  9. win7 设置双屏壁纸

    http://dualmonitortool.sourceforge.net/ http://www.displayfusion.com/Features/Wallpaper/ 以第一个软件为例: 1 ...

  10. <router-link :to="...">

    一.<router-link :to="..."> to里的值可以是一个字符串路径,或者一个描述地址的对象.例如: // 字符串<router-link to=& ...