react和vue区别
两者本质的区别:模板和组件化的区别
Vue本质是MVVM
框架,由MVC
发展而来;
React是前端组件化
框架,由后端组件化发展而来;
Vue使用模板
React使用JSX
React本身就是组件化
Vue是在MVVM
上扩展的
共同点:
都支持组件化,都是数据驱动视图
监听数据变化的实现原理不同:
Vue通过getter/setter以及一些函数的劫持,能精确知道数据变化
React默认是通过比较引用的方式进行的,如果不优化(pureComponent/shouldComponentUpdate)可能导致大量不必要的VDOM得重新渲染
数据流的不同:
vue1:
父子组件之间,props可以双向绑定
组件与DOM之间可以通过v-model双向绑定
vue2去掉了第一种,父子组件之间不能双向绑定了(但是提供了一个语法糖自动帮你通过事件的方式修改),并且 Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。
React从诞生之初就不支持双向绑定,React一直提倡的是单向数据流,他称之为 onChange/setState()模式
高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,所以高阶函数对React来说非常简单。
Vue中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。
组件通信的区别:
二者都有props
vue provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级
react context 进行跨层级的通信
渲染模版的不同:
React是通过JSX渲染模版
而Vue是通过一种拓展的HTML语法进行渲染
React是在组件JS代码中,通过原生JS实现模板中的常见语法,比如插值,条件,循环等,都是通过JS语法实现的
Vue是在和组件JS代码分离的单独的模板中,通过指令来实现的,比如条件语句就需要 v-if 来实现
Vuex和Redux的区别:
在 Vuex 中,`$store` 被直接注入到了组件实例中,使用`dispatch`和`commit`提交更新。通过`mapState`或者直接通过`this.$store`来读取数据
组件中既可以` dispatch action `也可以 `commit updates`
在 Redux 中,我们每一个组件都需要显示的用 `connect `把需要的` props `和` dispatch` 连接起来。
Redux 中只能进行`dispatch`,并不能直接调用 `reducer` 进行修改。
Redux 使用的是不可变数据,而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state,而Vuex是直接修改.
Redux 在检测数据变化的时候,是通过 diff 的方式比较差异的,而Vuex其实和Vue的原理一样,是通过 getter/setter来比较的
diff算法不同:
Vue基于snabbdom库,它有较好的速度以及模块机制。Vue Diff使用双向链表,边对比,边更新DOM。
React主要使用diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。
事件机制不同:
Vue
Vue原生事件使用标准Web事件
Vue组件自定义事件机制,是父子组件通信基础
Vue合理利用了snabbdom库的模块插件
React
React原生事件被包装,所有事件都冒泡到顶层document监听,然后在这里合成事件下发。基于这套,可以跨端使用事件机制,而不是和Web DOM强绑定。
React组件上无事件,父子组件通信使用props
数据是否可变:
react
整体是函数式
的思想,把组件设计成纯组件
,状态和逻辑通过参数
传入,所以在react
中,是单向数据流
,推崇结合immutable
来实现数据不可变
。react在setState
之后会重新走渲染
的流程,如果shouldComponentUpdate
返回的是true
,就继续渲染,如果返回了false
,就不会重新渲染
vue
的思想是响应式
的,也就是基于是数据可变
的,通过对每一个属性建立Watcher
来监听,当属性变化的时候,响应式的更新对应的虚拟dom
vue:
Object.defineProperty 数据劫持监听双向绑定
this.data = 0
react:
view = f(state)
this.setState(data:0)
react
的性能优化需要手动
去做,而vue
的性能优化是自动
的,但是vue
的响应式机制
也有问题,就是当state
特别多的时候,Watcher
也会很多,会导致卡顿
,所以大型应用(状态特别多
的)一般用react
,更加可控
通过js来操作一切,还是用各自的处理方式:
reac
t的思路是all in js
,通过js
来生成html
,所以设计了jsx
,还有通过js
来操作css
vue
是把html,css,js
组合到一起,用各自
的处理方式,vue
有单文件组件,可以把html、css、js
写到一个文件中,html
提供了模板引擎
来处理。
类式的组件写法,还是声明式的写法:
react是类式
的写法,api很少
vue是声明式
的写法,通过传入各种options
,api
和参数
都很多。所以react
结合typescript
更容易一起写,vue稍微复杂。vue3支持class类式的写法了
react整体的思路就是函数式
,所以推崇纯组件,数据不可变,单向数据流
,当然需要双向的地方也可以做到,比如结合redux-form,而vue是基于可变数据
的,支持双向绑定
。react组件的扩展一般是通过高阶组件,而vue组件会使用mixin。vue内置了很多功能,而react做的很少,很多都是由社区来完成的,vue追求的是开发的简单
,而react更在乎方式是否正确
。