react、vue、angular简要对比

简要记录一下这三个比较流行的前端框架的一些对比

框架与库

react和vue都是一个只专注于视图的库,而angular则是一个不折不扣的框架,里面集成了路由、单元测试等;而react和vue则是结合上它们的社区生态能够变成一个框架,比如react全家桶(react+react-router+redux)、vue全家桶(vue+vue-router+vuex);

上手难度方面

vue最容易上手,首先它是我们华人Evan You(尤雨溪)开发的,所以最开始的中文文档是很健全的;其次是react,再就是angular1,最后是angular2+版本;angular2以上官方推荐使用typescript,确实会稍微将其门槛提高一下,但是带来的可维护性也是很显然的。

vue的优化做的比react好一些

在 React 应用中,当某个组件的状态发生变化时,它会以该组件为根,重新渲染整个组件子树。如要避免不必要的子组件的重渲染,你需要在所有可能的地方使用 无状态组件(PureComponent) ,或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。 然而,使用 PureComponent 和 shouldComponentUpdate 时,需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况,那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。而在做vue相关的项目时,我们只需要关注于业务逻辑,而不需要去操心是否会产生不必要的组件渲染,因为vue已经把这些麻烦的东西很好的解决了。

社区方面

react和angular相对来说比vue稍微好一些,因为react后面有facebook在官方维护,angular有google官方维护;当然vue现在也是发展的非常不错,维护者也是在逐步增多;

跨端能力

react相对来说强一些,因为react-native的大规模使用使其优势稍微强一些;当然现在vue结合weex也是可以实现跨端,但是weex现在还是仍需继续成长的;基于angular的一个很不错的跨端项目-ionic也是非常不错的。

vue写起来更加流畅、方便, react语法更简单、扩展更强大。

在这一方面,react和vue的出发点似乎是不一样的,比如,对于列表循环,使用vue,直接在标签上写 v-for 即可,然后就可以直接循环了,而react需要通过一个数组的map,然后在return,在形式上来说,vue的写法还是更加舒服一点。 另外,由于vue局部的数据双向绑定,所以vue在处理表单这一块也是游刃有余,非常方便,而react仅仅是处理一个表单,就需要添加很多无关的代码,这个还是非常别扭的。
可以看得出来,vue提供了更多的api,可以做更多的事情,但是, 这也体现了react的优点,即非常简单,提供的api很少,它只帮我们做了虚拟DOM的工作,其他的事情可以让我们自由的发挥,所以从这个角度来说,react还是更加简洁一些。

数据流

angular是双向数据绑定,vue在表单上可以双向绑定,默认是单向绑定,react则一直是单向数据,这样应用的整个状态更加可控一些。React推崇的是函数式编程和单向数据流:给定原始界面(或数据),施加一个变化,就能推导出另外一个状态(界面或者数据的更新)。
React和Vue都可以配合Redux/vuex来管理状态数据。

性能方面

angular1会差一些,因为它的脏检查, 在 AngularJS 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。AngularJS 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue 和react则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,再加上虚拟dom的强大之处,性能会好一些。

简要总结

如果是初级开发者,则可以先从vue开始入手,等掌握的差不多了,可以去用一下react,当再有精力的时候可以去学一下typescript去上手一下angular,总之,需要学的东西很多,慢慢去攻克。