REACT 和 VUE的区别
- 框架的本质
Vue是MVVM框架,由MVC发展而来。而React是前端组件化框架,由后端组件化发展而来。 - 数据流的不同
Vue是双向绑定,组件和DOM之间可以通过v-modal双向绑定。而React是单向数据流,onChange/setState()模式。不过Vuex和Redux状态管理都是单向数据流。 - 监听数据变化的实现原理不同
Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化。React默认是通过比较引用(diff)进行,如果不进行优化容易导致大量不必要的VDOM的重新渲染。由于设计理念不同,Vue设计的更好上手,而大型项目中React鲁棒性更好。 - HoC和mixins
Vue组合不同功能的方式是mixins,因为Vue中组件是被包装的函数,会隐式做很多事情,返回一个HoC,那么这个组件可能会无法工作。React组合不同功能的方式是HoC(高阶组件)。React最早也是mixins,但是觉得对组件入侵太强会出现一些问题,于是弃用。高阶组件本质就是高阶函数,React的组件是一个纯粹的函数,高阶函数对React很合适也很简单。 - 模板渲染方式不同
React通过JSX渲染模板。而Vue通过拓展的HTML语法进行渲染。React并不依赖JSX。React更多通过原生js实现模板中的常见语法,比如插值,条件,循环等,较原生和纯粹。但是Vue喜欢对js代码进行封装,做成v-指令这种语法糖,html会稍微有点乱。react中的render函数支持闭包特性,import之后在render中可以直接调用,而Vue中模板使用的数据都要挂在this指向进行一次中转,所以我们import完之后,需要在components中声明一次。 - 渲染过程不同
Vue由于跟踪每一个组件的依赖关系,可以更快地计算出VDOM的差异,不需要重新渲染组件树。而React在应用的状态被改变时,全部子组件都会重新渲染,对应的生命周期钩子函数是shouldComponentUpdate,但Vue默认做了这个优化。