前两天有人给建议,让学学react,周末时间学习了一下,并做了一些demo。初学者可以参考我的github。在学习以及做demo的过程,发现其实react和vue有很多相像的地方,于是想对比一下这两个框架。
1、设计思想
react和vue设计思想是类似的,都是组件化开发(component),双向数据绑定,props参数传递,组件通信,state状态管理器,lifecircle生命周期等。
2、代码结构
react和vue代码结构有很大不同,vue采用模板,需要学习整套模板指令(当然也不难);react使用的JSX,不需要学习模板指令,只需要会HTML和js就行了。
从这个角度说,vue的模板结构
优点:
- 更容易理解
- 功能和布局分开
缺点:
- 需要学习模板语法(不过这也很简单啦)
react的JSX:
优点:
- 不需要学习指令,只需要会HTML和js
- 渲染函数更易于调试和测试(vue也提供了使用模板或者渲染函数的选项)
- 安全(这个待找资料)
缺点:
- 对新手而言不如vue容易上手
3、状态(state)
- react里的数据是不可变的(immutable)
必须使用setState方法
why?
react是通过比较当前状态和前一个状态的区别来决定何时以及如何重新渲染DOM的内容,因此需要使用不可变得状态。
- vue中数据是可变的(mutated)
vue是如何对状态进行管理的?
当向状态中添加一个新对象时,vue将遍历其中的所有属性,并且将他们装换为getter,setter方法。然后vue的响应系统开始对该状态的跟踪弄,当该状态的内容发生变化时,就会自动重新渲染DOM。
不过vue的响应系统还是有些坑的,比如它无法检测属性的添加和删除,以及某些数组的更改,这时候就要用Vue API中的类似于React的set方法的措施来解决。
4、项目规模
- 如果你的应用需要尽可能的小和快,请使用vue
vue的渲染系统比react的更快。react压缩版本体积是vue的两倍大,但不能带来双倍的功能。
- 如果你计划构建一个大型应用程序,请使用react(大型项目需要透明度和可测试性)
vue的模板容易出现难以注意到的运行时错误,同时也不容易测试,重构和分解。
相比之下,js模板可以组织成经过良好分解,且使用DRY(don’t repeat yourself-避免重复代码)原则的代码的组件,因而具有更强的可重用性和可测试性。
vue也有组件系统和渲染函数,但是react渲染系统可配置型更强,并包含如shallow rendering这样的特性,可结合react的测试工具一起使用,从而大大提高代码的可测试性以及可维护性。
5、适用于web端和原生App的框架
React Native适用于移动端开发,所以react更适合同时兼顾web端和原生App的项目。