原文链接:http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react

在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。

React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。

ReactJS 的背景及原理的更多相关文章

  1. Dubbo系列(一)dubbo的产生背景与原理概述

    一.Dubbo框架的产生背景        大规模服务化之前,应用只是通过RMI或Hessian等工具,简单的暴露和引用远程服务,通过配置服务的URL地址进行调用,通过F5等硬件进行负载均衡. (1) ...

  2. 第一课 Dubbo背景及原理

    1 . 技术背景 Dubbo每天为2,000+个服务提供3,000,000,000+次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点. Dubbo是一个阿里巴巴开源出来的一个分布式服务框架,致力于 ...

  3. C++11<functional>深度剖析:背景、原理、接口与实现

    自C++11以来,C++标准每3年修订一次.C++14/17都可以说是更完整的C++11:即将到来的C++20也已经特性完整了. C++11已经有好几年了,它的年龄比我接触C++的时间要长10倍不止吧 ...

  4. 一看就懂的ReactJs入门教程-精华版

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  5. 2016-08-01一起领略ReactJs的风采

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  6. ReactJs入门教程

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  7. 一看就懂的ReactJs入门教程(精华版)

    一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...

  8. 一看就懂ReactJS

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  9. [转]ReactJS入门教程

    Refference From:http://www.cocoachina.com/webapp/20150721/12692.html 现在最热门的前端框架有AngularJS.React.Boot ...

随机推荐

  1. html 第一阶段 学习使用总结

    基本使用内容: <html> <head> <title>Title of the document</title> <link rel=&quo ...

  2. NYOJ -37回文字符串

    这道题看了好大会没有思路,上网一搜发现这么简单,但是我为什么就想不到呢,??就是求和它的逆序之后的字符串最长公共子序列,然后用总的长度减去它就行了.原因是是因为只要是在公共子序列里面,那么他就是对称的 ...

  3. WinHeap.H

    网上找到的,对 Windows Heap 有详细的定义. // file winheap.h typedef void VOID; typedef unsigned __int8 UINT8; typ ...

  4. java 线程池用法

    public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, TimeUnit unit, ...

  5. mongodb的地理空间索引常见的问题

    创建地理空间索引注意事项 创建地理空间索引失败,提示错误信息如下 > db.places.ensureIndex({"loc":"2dsphere"}){ ...

  6. iOS 网络与多线程--1.检测网络链接状态

    通过Reachability库,检测设备的网络连接状况. 使用到的类库:Reachability Reachability库,是一个iOS环境下,检测设备网络状态的库,可以在网络上搜索下载. 使用之前 ...

  7. 跟踪对象属性值的修改, 设置断点(Break on property change)

    代码 //Break on property change (function () { var localValue; Object.defineProperty(targetObject, 'pr ...

  8. 1.3.1 switch 语句中的 String

    switch语句是一种高效的多路语句,可以省掉很多繁杂的嵌套if判断: 在Java 6及之前,case语句中的常量只能是byte.char.short和int(也可以是对应的封装类)或枚举常量,在Ja ...

  9. jquery keypress事件浏览器兼容性

    今天在做“财务管理系统”的时候,使用jquery的ajax从前台传递用户输入到后台,并保存到数据库,但是在前台为了界面的简介和一致性,没有使用按 钮来实现"确定"和"取消 ...

  10. 关于 typings install 的使用

    typings 用来管理.d.ts的文件,这种文件是js的一种接口描述,原因是有很多js库并没有typescript的版本. 微软给出一种描述文件,让IDE识别各种js库的代码提示以及类型检查等. 写 ...