首页 >web前端 >js教程 > 正文

vue和react中dom的区别

原创2021-02-03 10:33:1001280

vue和react中dom的区别:1、vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树;2、对于React而言,每当应用的状态被改变时,全部组件都会重新渲染。

本文操作环境:windows7系统、react17.0.1&&vue2.0版本、Dell G3电脑。

虚拟DOM概念随着react的诞生而诞生,由facebook提出,其卓越的性能很快得到广大开发者的认可;继react之后vue2.0也在其核心引入了虚拟DOM的概念。

什么是虚拟DOM?

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。

这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改,这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

vue和react中虚拟dom的区别

vue和react中虚拟DOM(virtual DOM)是不一样的。

vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。

而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制。

推荐:《js基础教程

以上就是vue和react中dom的区别的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:vue react
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • 小白拯救者:  PHP7基础语法快速预览小白拯救者: PHP7基础语法快速预览
  • 《基于Swoole偷看MySQL与PHP的通信过程》《基于Swoole偷看MySQL与PHP的通信过程》
  • ThinkPHP5.1开发基础ThinkPHP5.1开发基础
  • ThinkPHP5.1企业站点快速开发ThinkPHP5.1企业站点快速开发
  • PHP安全与漏洞PHP安全与漏洞
  • 视频教程分类