Vue与React比较

以前用到了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 更加繁荣。

我的观点

1. React对比Vue来讲，Vue的学习成本更低，更容易入手，模版语法开发起来我的以为会比React的Jsx更快。

2. 因为React是须要setState更新状态以及利用shouldComponentUpdate来控制是否reRender，当应用比较庞大的时候，这一点的优化比较重要。推荐大应用使用React。