ReactJs的虚拟dom是个啥情况?

这个周末的先行者课程要讲React的一些东西,所以今天写一些React的内容。

话说前端操作中最消耗资源的是啥?如果我说dom操作,那应该没有人会反对吧。

在以前使用jq的时候是先找到事件再操作dom,算是“事件更新dom”;现在的React和vue、angularJs之类的,都是把dom操作给隐藏起来,开发者就专心搞数据就好了,有数据了之后,更新到dom上去,算是“数据更新dom”。

至于这个数据是怎么具体到dom上去的?React们表示,这不用你操心,我给你办了。用什么办的?React说,“虚拟DOM(Virtual DOM)”。

虚拟dom应该算是一种数据结构。它就不是dom节点,只是一个js对象罢了。因为是js对象,所以对它的处理不涉及dom树的插入、删除,dom节点的渲染,css的匹配什么的,这都不涉及。只是在内存中对js对象进行操作,所以效率比传统的dom操作要高出许多。

简单的说吧,如果没有虚拟dom,那你操作dom时其实就是在不断的修改innerHTML的值。而React的虚拟dom的diff算法只是纯粹的js层面的计算,比innerHTML这种操作dom树的方法,那开销小了不是一点半点。

DOM,虽然js可以操作它,但它和js其实不是一个东西。DOM只是浏览器开放出来的可以让js操作html文档的方法而已。在现在这个前端时代,随便有点小改动都去搞DOM节点,那开销是不可接受的。

ReactJs它有二个特点:batching 和 Diff。

batching简单的说,就是批处理,就是尽可能把所有的DOM操作都获得,然后一次的发送给DOM。其实就是变相的减少了操作DOM的次数。

至于Diff嘛,大家都比较了解,其作用就是提高虚拟dom速度及性能的算法。正是在这二个特点的基础之上,React才没有像其它前端js框架那样采用数据绑定的方式去更新dom,而是采用了DOM层面的检查机制。

如果把React中的组件概念替换成DIV标签,那也只是圈套圈的码结构而已,区别只是在jsx中可以自定义标签名而已。

其实在我看来,React只是解决了DOM绘制方面的问题,对于数据的操作并不多,所以才有了后来的Redux。

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

原文发表时间:2017-08-02

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏liulun

学习WPF——使用Font-Awesome图标字体

图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可...

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

九彩拼盘的前端技能

11820
来自专栏Golang语言社区

【转载】XHTML 结构化之二:案例分析:W3school 的结构化标记

无论如何,不要跳过本节。阅读本章将增进你的技能,为你的网页减肥,并且使你对标记与设计之间的差异有更清晰的认识。本章中的理念是易于学习的,但是却能极大的提高网站的...

382160
来自专栏web前端

用jQuery+easyUI遇到的几个插件与文件详解

很早就开始跟着老师学习jQuery课程,那时候是要求熟练使用jQuery中的easyUI插件中的控件,包括textbox、combobox、panel、chec...

200100
来自专栏张戈的专栏

解决SecureCRT的vim中为下划线而无高亮问题,附最佳护眼配色方案。

今天第一天上班,发现新公司也是用的最熟悉的 SecureCRT 终端。领到自己的办公电脑后,第一件事就是下载并安装了 SecureCRT 7.1。并设置了以前最...

61250
来自专栏一场梦

学习网页制作其实并不难

27730
来自专栏CDA数据分析师

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

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

23550
来自专栏芋道源码1024

Github改版,宣布放弃jQuery || 你的青春里,是否有过 JQuery 的身影?

2018年7月25日,Mislav Marohnić在推文中宣布GitHub前端已经彻底删除jQuery依赖,并全部依赖原生API。

18200
来自专栏韩东吉的Unity杂货铺

零基础入门 14: UGUI 打字机效果实现

如上图,效果大概就是这样,有一段文字,和音频,文字要这种显示效果,并且在文字出现的时候,要有背景键盘音效的声音,来模拟打字机的效果。最好还可以调整文字的出现速度...

20220
来自专栏进击的君君的前端之路

React学习笔记—React组件

12040

扫码关注云+社区

领取腾讯云代金券