react diff 极简版
为什么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 极简版的更多相关文章
- Underscore源码阅读极简版入门
看了网上的一些资料,发现大家都写得太复杂,让新手难以入门.于是写了这个极简版的Underscore源码阅读. 源码: https://github.com/hanzichi/underscore-an ...
- js消除小游戏(极简版)
js小游戏极简版 (1) 基础布局 <div class = "box"> <p></p> <div class="div&qu ...
- SimpleThreadPool极简版
package com.dwz.concurrency.chapter13; import java.util.ArrayList; import java.util.LinkedList; impo ...
- 极简版 react+webpack 脚手架
目录结构 asset/ css/ img/ src/ entry.js ------------------------ 入口文件 .babelrc index.html package.json w ...
- Vue Virtual Dom 和 Diff原理(面试必备) 极简版
我又来了,这是Vue面试三板斧的最后一招,当然也是极其简单了,先说Virtual Dom,来一句概念: 用js来模拟DOM中的节点.传说中的虚拟DOM. 再来一张图: 是不是一下子秒懂 没懂再来一张 ...
- 极简版ASP.NET Core学习路径及教程
绝承认这是一个七天速成教程,即使有这个效果,我也不愿意接受这个名字.嗯. 这个路径分为两块: 实践入门 理论延伸 有了ASP.NET以及C#的知识以及项目经验,我们几乎可以不再需要了解任何新的知识就开 ...
- 【极简版】SpringBoot+SpringData JPA 管理系统
前言 只有光头才能变强. 文本已收录至我的GitHub仓库,欢迎Star:https://github.com/ZhongFuCheng3y/3y 在上一篇中已经讲解了如何从零搭建一个SpringBo ...
- react实现极简搜索框效果
hover.css内容 * { margin:; padding:; } li.hover { background: #ccc; color: darkgreen; } js内容 import Re ...
- 【极简版】OpenGL 超级宝典(第五版)环境配置 VS2010
事先声明:该教程仅适用于VS2010环境下超级宝典第五版的配置 第一步:下载示例代码和环境包: 链接:https://pan.baidu.com/s/1llRRQ8ymBgMGuXp5M50pJw 提 ...
随机推荐
- yum处理损坏的包依赖关系
有时在安装多个软件包时,某个包的软件依赖关系可能会被另外一个包的安装覆盖掉.这叫做损坏的包依赖关系(broken dependency). 如果系统出现问题,可以先尝试: yum clean all ...
- Jenkins添加Windows自动化构建方案
一.为Jenkins添加Windows节点 这里需要填写远程工作目录,启动方法一项一定要选择"Launch agent via Java Web Start"一项,其它的保持默认. ...
- scip 练习2.18
(define (append a b ) (if (null? a )b (cons (car a) (append (cdr a) b)))) (define (reverse l) (appen ...
- kubeadm部署一个Kubernetes集群
kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具.这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 $ kubeadm in ...
- JUC 一 CountDownLatch(闭锁)
java.util.concurrent 介绍 CountDownLatch是一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待 CountDownLatch cou ...
- Development 编程规范
{ 命名规范类命名 1)所有的类名,接口名(Protocol)均以大写字母开头,多单词组合时,后面的单词首字母大写. 类,接口名必须是有意义的,切忌使用中文拼音命名.另外所有类都要加标致前缀:“O ...
- Nginx的静态代理
Nginx的静态代理 Nginx的web请求的处理机制 Nginx结合多进程和异步机制对外提供服务,异步机制使用的是异步非阻塞机制,即AIO,Nginx的master进程会生成多个worker进程,m ...
- Dart编程语法
语法定义了一组用于编写程序的规则.每种语言规范都定义了自己的语法.Dart语法有如下内容组成: 变量和运算符 类 函数 表达式和代码块 判断和循环结构 注释 库和包 类型定义 数据结构表示:集合/泛型 ...
- Kafka命令行操作
Kafka命令行操作 1)查看当前服务器中的所有topic [bingo@hadoop101 kafka]$ bin/kafka-topics.sh --list --zookeeper hadoop ...
- OpenStack与KVM的区别与联系
转:https://www.aliyun.com/zixun/content/2_6_280418.html OpenStack与KVM都是目前IT界比较热门的两个词汇.它们都是开源的,都与Linux ...