react和vue是市面上最流行的两个前端框架,下面对react和vue的特性进行一个对比。
1.模板
表面上,模板的语法不同:
React 是通过JSX渲染模板
而Vue是通过一种拓展的HTML语法进行渲染
深层上,模板的原理不同,这才是他们的本质区别:
React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值、条件判断、循环等,都是通过JS语法实现的
Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如v-if
2.Vue和React中数据绑定原理不同
Vue通过getter/setter以及Object.defineProperty的函数劫持,能精确知道数据变化,不需要特别的优化就能达到很好的性能
在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。当然,这可以通过shouldComponentUpdate这个生命周期方法来进行控制purerender,但Vue将此视为默认的优化。
react渲染:
vue渲染:
3.数据流的不同
总所周知,vue中默认是支持双向绑定的。在vue1.x中我们可以实现两种双向绑定:
1.父子组件之间,props可以双向绑定;
2.组件与DOM之间可以通过v-module双向绑定
而vue2.x中去掉了第一种,也就是父子组件之间不能双向绑定了,但是提供了$emit语法糖自动帮助通过事件的方式修改。由于vue2.x已经不支持组件对自己的props进行任何修改。所以现在只有组件↔DOM之间的双向绑定这一种。
然而react从诞生开始就不支持双向绑定,react一直提倡的是单向数据流。但是由于我们在项目中都会用vuex和redux等单向数据流的状态管理框架,因此很多时候感受不到这一点区别。
4.组件通信的区别
在vue中有三种方式可以实现组件通信:
父组件通过props向子组件传递数据或回调。但是一般来说,我们只穿数据,而通过事件的机制来处理组件向父组件的通信
子组件通过事件向父组件发送消息
通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据,可以跨越多个层级
在react中,也有对应的三种方式:
父组件通过props可以向子组件传递数据或回调
可以通过context进行跨层级的通信,这和vue中provide/inject起到的作用差不多
5.vuex和redux的区别
vuex的流向:view——>commit——>mutations——>state变化——>view变化(同步操作)
view——>dispatch——>actions——>mutations——>state变化——>view变化(异步操作)
redux的流向:view——>actions——>reducer——>state变化——>view变化(同步异步一样) redux的state数据设计,进行范式化。