react VS vue

react VS vue

Posted by SkioFox on March 27, 2019

react和vue都是MVVM框架,由数据驱动视图的方式,摆脱了以往的以事件驱动的架构。在vue中实现了双向数据绑定(数据和视图会互相影响变化)和单向的数据流。而react中只有单向的数据流,当然react也可以实现数据和视图的双向绑定。可以认为react只是单纯的view层实现,双向绑定是视图外的业务需求。

  • react

react是一个简单构建web UI的库,核心API其实非常少。他只是告诉我们如何创建组件以及组件之间如何进行数据传递。甚至于创建组件的方式正是使用ES6的class语法。

因此开发中react的使用对于ES6的语法依赖非常高。我们只需要掌握组件里的props,state,ref,生命周期等基本知识。就连如果想要在jsx模板来遍历渲染,还得使用原生的map方法。而react的高阶组件,理解之后发现,其实就是JavaScript函数式编程中所涉及到的思维方式。

react的最大特点就是简单并且与原生JavaScript非常接近。即给开发者带来的束缚非常少。一个功能的实现,如果你知道使用原生JavaScript如何实现,那么你就一定能够很轻松的知道使用react如何实现。

react给到开发者的是自由和灵活以及简洁的api,但是这并不意味着react简单。核心API简单并不代表上手容易。在使用之初,如果你经验缺乏,那么你用react写出来的页面,性能可能会非常差。因为无意识的,你的组件可能会有非常多的多余的渲染。

  • vue

相对而言,vue提供的能力则更多一点,这些便捷的能力会让初学者感觉到非常的幸福,因为很多效果只需要一些简单的代码既可以实现。

如:统一管理的计算属性(vue的组件中提供了一个计算属性来统一管理表达式),class的动态语法,双向绑定(表单处理),修饰符等。

vue提供的方便可爱的语法糖还有很多,vue也会有一些语法限制,而这些语法限制在某种程度上来说降低了我们的开发成本,提高了开发效率。这大概也就是很多人认为vue更加简单易学的原因所在吧。

就从学习难易程度上来说,react之所以上手更加困难,主要的原因并不在于react本身,而在于围绕react的丰富的生态圈。正是由于react本身足够简单,所以我们需要掌握的react组件就更多。比如react-router,react-redux等。

  • vue与react的异同解析
  1. 网络请求和前后端交互(http请求=>axios)
  2. 框架思想(MVVM/数据驱动视图=>)
  3. 路由(路由组件react-router和vue-router)
  4. 数据管理或者状态管理(redux/react-redux和vuex)
  5. UI组件的构建(render渲染/jsx语法/react component和template模版)
  6. 数据和视图的结合方式(单向数据流和双向绑定)
  7. 生命周期和组件通信