前端三大框架中vue与react区别

author author     2022-09-04     586

关键词:

首先React与vue有几点相同之处

1.都使用了Virtual DOM

2.提供了响应式(Reactive)和组件化(Composable)的视图组件

3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库

性能方面

#React在性能方面使用virtual DOM实现没有vue的virtual DOM实现好,相比较来说vue的virtual DOM的实现更为轻量些

#在React应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树

如果避免不必要的子组件的重渲染,你需要在所有可能的地方去使用PureComponent,或者手动去实现shouldComponentUpdate方法,同时你可能会需要使用不可变的数据结构来 使你的组件更容易被优化

但是如果在使用PureComponent和shouldComponentUpdate时,需要保证该组件的整个子树的渲染输出都是由该组件的props所决定的,如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致,使得React中的组件优化伴随着相当的心智负担

在vue应用中,组件的依赖是在渲染过程中自动追踪的,所以系统能精确知晓哪个组件确实被重渲染,可以了解为每个组件都已经自动获得了shouldComponent,并且没有上述子树问题限制

Vue 的这个特点使得开发者不再需要考虑此类优化,从而能够更好地专注于应用本身

开发时性能

显然,在生产环境中的性能是至关重要的,目前为止我们所具体讨论的便是针对此环境。但开发过程中的表现也不容小视。不错的是用 Vue 和 React 开发大多数应用的速度都是足够快的。

当性能在生产中性能是直接与终端用户体验相关的更重要的指标时,表现在开发中仍然很重要,因为它与开发体验密切相关。

然而,假如你要开发一个对性能要求比较高的数据可视化或者动画的应用时,你需要了解到下面这点:在开发中,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧。

这是由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面。

HTML & CSS

  在React中,一切都是JavaScript,不仅仅是HTML可以用JSX来表达,现在的也越来越多地将css也纳入到javascript中来处理

  Vue的整体思想就是拥抱经典的Web技术,并在其上进行扩展

  在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖

  JSX说是手写的渲染函数有下面这些的优势:

  1.你可以使用完整的编程语言 javascript功能来构建你的视图页面,比如你可以使用临时变量 JS自带的流程控制 以及直接引用当前JS作用域中的值等等

  2.开发工具对JSX的支持相比现有可用的其他VUE模版还是比较先进的如:linting 类型检测 编辑器的自动完成

事实上Vue也提供了渲染函数,甚至支持JSX,然而,我们默认推荐还是template模版,任何合乎规范的HTML都是合法的Vue模版,这也带来一些特有的优势:

  1.对于很多习惯了 HTML 的开发者来说,模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分,但如果这种区别会导致开发效率的提升,那么它就有客观的价值存在。

  2.基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易

  3.这也使得设计师和新人开发者更容易理解和参与到项目中

  4.你甚至可以使用其他模板预处理器,比如 Pug 来书写 Vue 的模板

我们可以把组件区分为两类:一类是偏视图表现的 (presentational),一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板,在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化,但整体来说我们发现表现类的组件远远多于逻辑类组件。

CSS的组件作用域

如果不把组件分布在多个文件上的话,在React中作用域内的CSS就会产生警告,非常简单的CSS还可以工作,但是稍微复杂点的,比如悬停状态 媒体查询 伪类选择器要么就要通过沉重的依赖来重做,要么就不能使用

规模方面

向上扩展

Vue和React都提供了强大的路由来应对大型应用,而这些状态管理模式甚至 也可以非常容易的集成在 Vue 应用中。实际上,Vue 更进一步地采用了这种模式vuex,更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

Vue和React最重要的差异是,Vue的路由库和状态管理库都是由官方来维护支持并且与核心库同步更新,而React则是选择把这些问题交给社区来维护,因此创建了一个更分散的生态系统,但相对的,React的生态系统相比Vue更加繁荣

最后,Vue提供了Vue-cli脚手架,能让你非常容易地构建项目,包含了Webpack,Browerify,甚至no build system,React在这方面也提供了create-react-app,但是现在还存在一些局限性:

1.它不允许在项目生成时进行任何配置,而 Vue 支持 Yeoman-like 定制

2.它只提供一个构建单页面应用的单一模板,而 Vue 提供了各种用途的模板

3.它不能用用户自建的模板构建项目,而自建模板对企业环境下预先建立协议是特别有用的

而要注意的是这些限制是故意设计的,这有它的优势,例如,如果你的项目需求非常简单,你就不需要自定义生成过程,你能把它作为一个依赖来更新

向下扩展

React学习曲线陡峭,在你开始学React前,你需要知道JSX和ES2015,因为许多事例用的是这些语法,你需要学习构建系统,虽然你在技术上可以用 Babel 来实时编译代码,但是这并不推荐用于生产环境。就像 Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行

本地渲染

ReactNative能使你用相同的组件模型编写有本地渲染能力的APP(ios和Android),能同时跨多平台开发,对开发者是非常棒的

在现在,Weex 还在积极发展,成熟度也不能和 ReactNative 相抗衡。但是,Weex 的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。

MobX

Mobx 在 React 社区很流行,实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上,React + Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。

 

前端框架vue和react的区别

前言:最近需要使用react,以前用过vue,故来总结两者的区别。首先React与vue有几点相同之处1.都使用了VirtualDOM2.提供了响应式(Reactive)和组件化(Composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局... 查看详情

web前端三大主流框架

前言web前端三大主流框架1、Angular2、React3、Vue其他框架1、miniui2、Layui3、Bootstrap4、MUI5、Backbone.js总结感谢前言把博主使用过的前端框架的都列出来,分享给大家!博主主要开发后端。web前端三大主流框架web前端三大主流... 查看详情

三大框架的对比

前端三大主流框架的对比Reactvueangular当前,三大主流前端框架分别是React、Vue、Angular这三个框架。  React起源于Facebook的内部项目,用来架设Instagram的网站,并于2013年5月开源。React拥有较高的性能,代码逻辑非常简单,越... 查看详情

前端两大框架vue和react的区别

1.设计思想  vue:vue的官网介绍说vue是一种渐进式框架,采用自底向上增量开发的设计;  react:采用函数式编程,推崇纯组件,数据不可变,单向数据流;2.编写语法  vue:采用单文件组件格式,保留了html,css,js分离的... 查看详情

前端框架vue入门

1.Vue简介Vue是一套构建用户界面的渐进性框架。Vue采用自底向上增量开发的设计,其关注点在图层,与angular的区别就在这里,它关注的是图层,而angular注释的是数据。2.与React的区别:2.1相同点使用VirtualDOM(虚拟dom)提供响应式... 查看详情

vue与react两个框架的区别对比

简单介绍React--Facebook创建的JavaScriptUI框架。它支撑着包括Instagram在内的大多数Facebook网站。React与当时流行的jQuery,Backbone.js和Angular1等框架不同,它的诞生改变了JavaScript的世界。其中最大的变化是React推广了VirtualDOM(虚拟DOM)并... 查看详情

vue入门vue与react和angular的关系和区别

.../手册:http://cn.vuejs.org/v2/api/二、vue.js是什么Vue是一个"MVVM框架(库)",和angular类似,相比angular小巧,比较容易上手Vue是一个构建用户界面点的渐进式框架,与其他重量级框架不同的是,vue采用 查看详情

vue与react的区别

相同点:都是基于组件化的轻量级框架,都专注于构建用户界面的视图层vue,react都会构建一个虚拟的DOM并同步带真是的DOM中 vue数据绑定表达式使用过的双大括号语法,而指令是用于向模板添加功能,react不使用模板,借助js... 查看详情

前端常用的框架都有哪些?

前端三大框架,是Angular、React、Vue,这三个框架现在是最为流行也是最多人用的框架。React:  1.声明式设计:React采用声明范式,可以轻松描述应用。  2.高效:React通过对DOM的模拟,最大限度地减少与DOM的交互。  3.灵活... 查看详情

前端框架(vue,react)介绍及面试题总结

Vue框架Vue是一套用于构建用户界面的渐进式框架,与其他大型框架相比,Vue被设计为可以自底向上逐层应用。相比起其他框架Vue更加灵活,开发者既可以选择使用Vue来开发一个全新项目,将Vue引入到一个现有的项... 查看详情

前端三大主流框架中文文档

AngularAngular官方同步中文文档: https://angular.cn/docsReactReact官方同步中文文档: https://doc.react-china.org/react/docs/hello-world.htmlReact入门中文文档: https://hulufei.gitbooks.io/react-tutorial/content 查看详情

vue学习笔记之-起步篇:vue与reactangular的区别

毋庸置疑,Vue、React、 Angular这三个是现在比较火的前端框架。这几个框架都各有所长,选择学习哪种就得看个人喜好或者实际项目了。相比之下, Vue是轻量级且容易学习掌握的。1、Vue和React相似之处都使用虚拟DOM提供了... 查看详情

前端svelte框架初体验(代码片段)

...些年,随着React、Vue、Angular三大框架逐渐稳定,前端技术栈的迭代似乎也渐渐缓慢下来。并且随着React16版本推出Fiber,Vue3.0版本的正式发布,前端三大框架都有了自己的护城河。不过话说回来,十年前我们谁... 查看详情

前端框架

一、基本介绍Angular、React、Vue是目前三大主流的前端框架,这三个框架都有很好的性能(这里的angular指的是2.0+),都支持数据绑定,组件等基本功能。1.1Angular是一个基于TypeScript的JavaScript框架。它由Google开发和维护。这是第一次... 查看详情

杂记2:react的亮点

...这不算很稀奇的事情。只是对比jQuery有优势。颠覆传统的前端开发意味着开发者要学习一些新的开发范式。比如传统前端遵循html/css/js分离,而React因为组件化,所以都使用JSX把html写在了JavaScript中。Vue号称自己的侵入性比React和A... 查看详情

前端react基础学习一(代码片段)

...构建用户界面的JAVASCRIPT库。不是一个MVC框架,而是一个前端界面开发工具,用于构建组件化UI的库。所以顶多算是MVC中的V(view)。  特点:减少与DOM的交互。React可以与已知的库或框架很好地配合。 通过React构建组件... 查看详情

web前端三大主流框架怎么读

参考技术AWeb前端三大主流框架都是Angular、React、Vue。1、AngularAngular原名angularJS诞生于2009年,之前我们都是用jquery开发,自从angular的出现让我们有了新的选择,它最大的特点是把后端的一些开发模式移植到前端来实现,如MVC、依... 查看详情

现在主流的前端框架都有哪些?

现在前端主要流行三大框架。给大家具体分析一下这三个前端框架:1、Angular大家眼里比较“叼”的框架,甚至有人说三大框架中只有她能称的上一个完整的框架,因为他包含的东西比较完善,包含模板,数据双向绑定,路由,... 查看详情