React虚拟DOM是个什么套路?

React最大的亮点就是快!天下武功,唯快不破,它走的就是这条路。那么它的快是如何达成的呢?是通过虚拟DOM,也就是它所说的Virtual DOM了。

那这个虚拟DOM,它到底是个什么东西呢?一句话,它是一种JS的数据结构。

这个结构是怎么生成,怎么来的?咱们暂且不管,这方面自有React的diff算法搞定。我们要做的是正确的理解它。

我们大家都知道HTML的页面是由一层一层,一级一级的DOM节点,互相嵌套而成的。对于DOM的任何操作,文字啊、大小、位置、颜色等,只要有一点点改动,整个页面DOM重绘,而众所周知DOM重绘是很费时费工的。

而React对这个问题的解决思路是这样的,它通过数据层面的抽象,把HTML的DOM结构,映射为JS对象的键值对。并把这个对象保存在内存中,然后对于DOM的任何操作,都是相应的在内存中操作这个映射DOM结构的JS数据对象了。

你想想,这速度能不快么,第一在内存中操作是速度最快的;第二这种操作根本没有页面重绘。

然后你在内存中的操作都OK了,结构了,它再把你改动的地方,映射到实际的DOM中,进行重绘。

这就是React虚拟DOM的思路,说起来确实是很简单,几句话的事。但学起来还是需要我们下一定的功夫的。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

React.JS一点通

10720
来自专栏知晓程序

一个天气小程序和他们跳过的 47 个坑,你该如何避免?

19620
来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

22250
来自专栏javascript趣味编程

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

17100
来自专栏知晓程序

电商类小程序实战教程 Vol.2:列表加载

12530
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

24950
来自专栏Coco的专栏

神秘的 shadow-dom 浅析

31940
来自专栏CDA数据分析师

那人的Excel技巧好烂,他做1个小时,别人29秒搞定

本文为简书作者傲看今朝原创,CDA数据分析师已获得授权 ”智能表格“在Excel中就是叫表格,恐怕是Excel当中最不起眼最受人忽视,却极其实用的功能之一,可以...

23050
来自专栏九彩拼盘的叨叨叨

九彩拼盘的前端技能

11820
来自专栏macOS 开发学习

Mac开发跬步积累(五): Dark Mode下适配你的UI界面

在macOS 10.9+ 的时候,苹果就提供了NSAppearance这个类来协助AppKit管理App的UI控件. NSAppearance决定着AppKit...

19320

扫码关注云+社区

领取腾讯云代金券