前端框架 vue 和 react 的区别

Posted 2021-01-01 yuxiaole

前言：最近需要使用 react，以前用过 vue，故来总结两者的区别。

首先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 会更合理。

 

转载自：https://www.cnblogs.com/yeshenyang/p/6992116.html?utm_source=itdadao&utm_medium=referral

 

总结一下

总结一下，我们发现的，Vue的优势是：

• 模板和渲染函数的弹性选择

• 简单的语法和项目配置

• 更快的渲染速度和更小的体积

React的优势是：

• 更适合大型应用和更好的可测试性

• 跨平台，Web端和移动端原生APP通吃

• 更大的生态系统，更多的支持和好用的工具

然而，React和Vue都是很优秀的框架，它们之间的相似之处多过不同之处，并且大部分的优秀功能是相通的：

• 用虚拟DOM实现快速渲染

• 轻量级

• 响应式组件

• 服务端渲染

• 集成路由工具，打包工具，状态管理工具的难度低

• 优秀的支持和社区