vue与react对比总结

Posted 2020-12-13 marui01

一、react和vue设计上的共同理念

1、使用 Virtual DOM

2、提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。

3、将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库（比如我们后面要提到的vue-router、react-router、vue、redux等）。

4、都拥有自己的脚手架，便于用户对于项目基础的搭建（vue-cli和create-react-app)

二、从设计理念上来讲的不同之处

1、React的是采用了函数式的编程思想、是单向数据流，而vue更偏重响应式、数据是可变的。

• 在react中，数据的流向是单向，也就是说，数据只会从父组件流向子组件。

react在经过setState对数据进行改变后，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染。而使用PureComponent就相当于是重写了shouldComponentUpdate，然后在里面作了props和state的浅层对比。

在这里的渲染，会以当前数据改变的组件为根节点，对该子树全部进行重新渲染。但是这个过程中，我们需要保证这颗子树是一个类似纯函数的概念，也就是说，所有的输出都由输入的props来决定，否则通过shouldComponentUpdate和PureComponent进行优化会导致组件有难以察觉的渲染结果不一致。

• 在vue中，组件的依赖是在渲染过程中自动追踪的。

也就是说，vue会对每一个属性都建立一个监听器，当被监听的属性发生变化时，vue会定位到数据发生变化的组件并且之重新渲染该节点，而不是重新渲染该子树，相当于vue自动为我们做了shouldComponentUpdate的优化。但是随之而来的，当vue中的state越来越多时，vue注册的监听器也越来越多，会导致些许的卡顿。

这也是为什么，我们在构建大型应用时，更偏重选择需要手动优化的react而不是自动优化的vue。但是当我们构建小型应用时，vue的优点是毋庸置疑的。

2、 React 中，所有的组件的渲染功能都依靠 JSX，而vue虽然也提供了函数渲染，但是我们还是更推荐使用模板进行书写

• react中，所有组件的渲染都是依靠jsx进行的，而jsx的本质是使用 XML 语法编写 javascript 的一种语法糖。而他的优点也是显而易见的。

你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

 

• 在vue中，任何合乎html规范的都是合法的vue模板

事实上vue也提供了渲染函数，但是在vue api设计的基础上，模板可以更好地契合vue的各种修饰符，以此可以用更少的代码来实现和jsx相同的功能。

同时模板的易于读懂以及便于迁移的特点，也更加契合用户的使用习惯。

三、从二者的生态圈来看

1、Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护，因此创建了一个更分散的生态系统。但相对的，React 的生态系统相比 Vue 更加繁荣。

2、虽然vue和react都提供了脚手架以便于开发者快速搭建项目，但是create-react-app相比较vue-cli有更多的局限性。

3、React 学习曲线陡峭，在你开始学 React 前需要预先对jsx以及es6进行一定程度的了解，在这个基础上才能更好的学习react和构建react系统；而vue可能只需要在你了解了vue的文档之后，就可以着手进行项目的开发。

 后续会继续升入细化进行两个框架的各方面对比，包括从api和技术选型两个角度来做一个详细的解读

 

参考文献： https://cn.vuejs.org/v2/guide/comparison.html