Vue与React 比较

unclewarren (40)in #web • 6 years ago (edited)

之前用到了Vue进行开发，后来用了React，然后总是被问到为什么用React？总是说得有点模棱两可,下面总结了一下，希望得到补充与指正

相同点

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM，有自己的diff渲染算法
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

1. 运行时性能比较

React 和 Vue 都是非常快的，所以速度并不是在它们之中做选择的决定性因素。对于具体的数据表现，

可以看看第三方
benchmark，它专注于渲染/更新非常简单的组件树的真实性能。

1.1 生命周期

Vue的生命周期

React的生命周期

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

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

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

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

 Vue 的这个特点使得开发者不再需要考虑此类优化，从而能够更好地专注于应用本身。当然，对于大型应用来说，基于这一点，还是推荐使用React，毕竟可以自己决定哪些props或者state变化才进行reRender

1.2 状态管理 vs 对象属性

React在state状态管理存储数据的，不能修改数据，修改数据在Setstate中
setState是异步的，如果需要马上利用结果，需要在setState传入回调，具体可以看看
React中setState几个现象---先知道再理解

在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理

2. HTML & CSS

在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达，现在的潮流也越来越多地将 CSS 也纳入到 JavaScript 中来处理。这类方案有其优点，但也存在一些不是每个开发者都能接受的取舍。Vue 的整体思想是拥抱经典的 Web 技术，并在其上进行扩展。

2.1 JSX vs Templates

在 React 中，所有的组件的渲染功能都依靠 JSX。
使用 JSX 的渲染函数有下面这些优势：

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

虽然Vue也可以使用JSX，但基本都使用模版语法，这也带来了一些特有的优势：

对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

个人觉得，使用Vue的模版语法开发起来更加便捷快速。可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。

2.2 组件作用域内的 CSS

对于Vue 来说,

设置样式的默认方法是单文件组件里类似 style 的标签。
单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。

<style scoped>
  .container{
      display:flex;
  }
</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-8123) 为组件内 CSS 指定作用域。

对于React来说,

语法不太一样，React设置class是用className字段，而设置css是使用对象的形式，当然，一般还是引入外部的css(经过编译的sass或者less文件)比较合适。

规模

Vue 和 React 都提供了强大的路由来应对大型应用。React 社区在状态管理方面非常有创新精神 (比如 Flux、Redux)，而这些状态管理模式甚至 Redux 本身也可以非常容易的集成在 Vue 应用中。实际上，Vue 更进一步地采用了这种模式 (Vuex)，更加深入集成 Vue 的状态管理解决方案 Vuex 相信能为你带来更好的开发体验。

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