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

相同点

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

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

1.运行时性能比较

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

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

1.1生命周期

Vue的生命周期

React的生命周期

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

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

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

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

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

在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，将其作为组件代码的一部分。

<stylescoped>.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。