参考http://caibaojian.com/vue-vs-react.html
React
是由Facebook创建的javascript UI 框架,它支撑着包括instagram在内的大多数Facebook网站,react与当时流行的jquery, bacebone.js和Angular.js等框架不同,他的诞生改变了javascript的世界,其中最大的变化是react推广了virtual dom,并创建了新的语法jsx,jsx允许开发者在javascript中书写html
Vue
致力于解决的问题与React一致,但却提供了另外一套解决方案,vue使用模版系统而不是jsx,使其对现有应用的升级更加容易,这是因为模版用的就是普通的html,通过vue来整合现有的系统是比较容易的,不需要整体重构,同时vue学习更加容易,vue主要是由一位开发者进行维护的,而不像react一样由facebook这类大公司维护
相似之处
react和vue的相似之处,例如他们都是js的ui框架,专注于创造前端的富应用,不同于早期js框架’功能齐全’, react与vue只有框架的骨架,其他的功能如路由,状态管理等是框架分离的组件
Virtual Dom(虚拟dom)
vue和react最大的一个相似之处,就是都使用了一种叫虚拟dom的东西,所谓的Virtual dom基本上说就是它名字的意思,虚拟dom,dom树的虚拟表现,他的诞生是基于一个概念,改变真实的dom状态比改变一个js对象的花销要大的多
Virtual dom是一个映射真实dom的js对象,如果需要改变任何元素的状态,那么先在Virtual Dom上进行改变,而不是直接改变真实的dom,当有变化的时候,一个新的Virtual dom对象会被创建并计算新旧Virtual dom之间的差别,只有再将这些差别应用在真实的dom上
例子如下,我们可以看看下面这个列表在HTML中的代码是如何写的:
<ul class="list">
<li>item 1</li>
<li>item 2</li>
</ul>
而在JavaScript中,我们可以用对象简单地创造一个针对上面例子的映射
{
type: 'ul',
props: {'class': 'list'},
children: [
{
type: 'li'
props: {}
children: ['item1']
},
{
type: 'li'
props: {}
children: ['item2']
}
]
}
真实的Virtual dom会比上面的例子复杂的多,但它本质是一个嵌套这数组的原生对象
当新一项被加进去这个js对象时,一个函数会计算出Virtual dom之间的差异并反应在真实的dom上,计算差异的算法是高性能框架的秘密所在(diff算法) ,react和Vue在实现上有点不同
Vue宣称可以更快地计算出Virtual Dom地差异,这是由于他在渲染地过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件🌲
而对于react而言,每当应用的状态被改变时,全部子组件都会重新渲染,当然,这可以通过shouldComponentUpdate这个生命周期的方法来进行控制,但Vue将此视为默认的优化
如果你的应用中,交互复杂,需要处理大量的UI变化,那么使用Virtual Dom是个好主意,如果你更新元素并不频繁,那么Virtual Dom并不一定使用,性能很可能还不如直接操纵Dom
组件化
react与vue都鼓励组件化应用,这本质上说,是建议你将你的应用分拆成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系
你可以认为组件就是用户界面中的一小块,如果让我来设计Facebook的UI 界面,那么聊天窗口只会是一个组件,评论会是另一个组件,不断更新的好友列表也会作为一个组件
在Vue中,如果你遵守一定的规则,你可以使用单文件组件,就是将html, javascript, css写在同一个文件中,不需要再.vue文件中引入css, < style src="./Pasta.css"> </ style>
这样也是可以的
react也是非常相似的,javascript被写入同一个组件文件中
props
vue和react中,都有props的概念,props在组件中是一个特殊的属性,允许父组件往子组件传送数据
在react中,这是必须的,它依赖一个‘单一数据源’作为他的‘状态’
在vue中。props略有不同,他们一样是在组件中被定义,但vue依赖于模版语法,你可以通过模版循环函数更高效的展示传入的数据
不同之处
配套框架
Vue和React相似但不同之处在于配套框架的处理方法,相同之处在于,两个框架都专注于UI 层,其他的功能,如路由,状态管理等都交由同伴框架进行处理
而不同之处在于他们如何关联他们各自的配套框架,Vue的核心团队维护者vue-router,vuex,他们都是作为官方推荐的存在,而React的react-router和react-redux则是由社区成员维护,他们都不是官方维护的
模版 , jsx
React与vue最大的不同是模版的编写,vue鼓励写近似常规的html模版,写起来很接近标准html元素,只是多了一些属性
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
这些属性也可以被使用在单文件组件中,尽管它需要在构建时将组件转换为合法的javascript和html
<ul>
<pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" @order="handleOrder(key)"></pasta-item>
</ul>
vue鼓励你去使用html模版去进行渲染,因此,通过把原有的模版整合成新的vue模版,vue很容易提供久的应用的升级,这也让新来者很容易适应他的语法
而React推荐你所有的模版通用javascript的语法扩展 — jsx书写,同样的代码,用jsx书写代码如下
<ul className="pasta-list">
{
Object.keys(this.state.pastadishes).map(key =>
<PastaItem index={key} key={key} details={this.state.pastadishes[key]} addToOrder={this.addToOrder} orders={this.state.orders[key]} />
)
}
</ul>
jsx只是javascript混合着xml语法,相反的观点是vue的模版语法除了往视图/组件添加逻辑的诱惑,保持了关注点分离
状态管理 vs 对象属性
应用中的状态是react关键的概念,也有一些配套框架被设计为管理一个大的state对象,如redux, 此外,state对象在react中是不可变的,意味着它不能被直接改变,在react中你需要使用setstate()方法去更新状态
而在vue中,state对象并不是必须的,数据由data属性在vue对象中进行管理,不需要使用setstate之类的方法去改变他们的状态,在vue对象中,data参数就是应用中数据的保存者
对于管理大型应用中的状态这一话题而言,vue解决方案适用于小型项目,对于大型项目而言不适合, 多数情况下,框架内置的状态管理是不足以支撑大型应用的,redux或vuex等状态管理方案是必须应用的
React Native
react native能在手机上创建原生应用,react在这方面处于领先位置,使用javascript, css和html创建原生移动应用,这是一个重要的革新,vue社区和阿里合作开发的vue版的react native----Weex也很不错,但仍处于开发状态且没经过实际项目的验证,如果你想将现有的应用升级为新的javasctipt框架,建议使用vue