vue和react的区别之我见

以你之姓@ 2023-02-14 15:39 117阅读 0赞

react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。

## 1.数据是不是可变的 ##

react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponent就是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

![format_png][]

而vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

![format_png 1][]

总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会很多，会导致卡顿，所以大型应用（状态特别多的）一般用react，更加可控。

## 2.通过js来操作一切，还是用各自的处理方式 ##

react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等，

![format_png 2][]

vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。

![format_png 3][]

## 3.类式的组件写法，还是声明式的写法 ##

react是类式的写法，api很少，

![format_png 4][]

而vue是声明式的写法，通过传入各种options，api和参数都很多。所以react结合typescript更容易一起写，vue稍微复杂。

![format_png 5][]

vue结合vue-class-component也可以实现类式的写法，但是还是需要通过decorator来添加声明，并不纯粹。

![format_png 6][]

react可以通过高阶组件（Higher Order Components--HOC）来扩展，而vue需要通过mixins来扩展  
一个react高阶组件的例子：

![format_png 7][]

![format_png 8][]

vue的mixin的例子：

![format_png 9][]

React刚开始也有mixin的写法，通过React.createClass的api，不过现在很少用了。  
Vue也不是不能实现高阶组件，只是特别麻烦，因为Vue对与组件的option做了各种处理，想实现高阶组件就要知道每一个option是怎么处理的，然后正确的设置。具体有多复杂，可以参考下面的文章。

[http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/][http_hcysun.me_2018_01_05_E6_8E_A2_E7_B4_A2Vue_E9_AB_98_E9_98_B6_E7_BB_84_E4_BB_B6]

## 4.什么功能内置，什么交给社区去做 ##

react做的事情很少，很多都交给社区去做，vue很多东西都是内置的，写起来确实方便一些，  
比如 redux的combineReducer就对应vuex的modules，  
比如reselect就对应vuex的getter和vue组件的computed，  
vuex的mutation是直接改变的原始数据，而redux的reducer是返回一个全新的state，所以redux结合immutable来优化性能，vue不需要。

## 总结 ##

上面主要梳理了react和vue的4点不同：

1.  数据是不是可变的
2.  通过js操作一切还是各自的处理方式
3.  类式的组件写法还是声明式的写法
4.  什么功能内置，什么交给社区去做

（其中第3点在vue3.0支持类式写法之后就可以去掉了）

react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。

![format_png 10][]

![format_png 11][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LTM0YzU1YTNlOThkMzNlZGYucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LTFhMWNhOGNmOGU1NzZiY2QucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWI3Y2FhYWMyMjdkMWYxNzIucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LTU0M2FmYTEyOTI2NmVjYzYucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWJlNjEwZmIxNzI2MGZhN2QucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWNmMGMxMzg4ODZjNTZiNTcucG5n?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWM2ZWEwMzZhMzg5NmMwM2MucG5n?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWM2MDIyMzYyZTkxZGY1NzEucG5n?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWVhMDhkZGZiYjNmZmY1MjEucG5n?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LWI1ODQ3YjU5MWE1MmY3NGYucG5n?x-oss-process=image/format,png
[http_hcysun.me_2018_01_05_E6_8E_A2_E7_B4_A2Vue_E9_AB_98_E9_98_B6_E7_BB_84_E4_BB_B6]: http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LTBkNGRhNDI5ZmUxNzkwNmIucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81MDc3NTE3LTBlMjdhZjQ4YWEwMGY0OTEucG5n?x-oss-process=image/format,png