React与Vue

　　React和vue都是作组件化的，总体的功能都相似，可是他们的设计思路是有不少不一样的。使用react和vue，主要是理解他们的设计思路的不一样。

　　若是你喜欢用（或但愿可以用）模板搭建应用，请使用Vue
       若是你喜欢简单和“能用就行”的东西，请使用Vue
       若是你的应用须要尽量的小和快，请使用Vue
       若是你计划构建一个大型应用程序，请使用React
       若是你想要一个同时适用于Web端和原生App的框架，请选择React
       若是你想要最大的生态圈，请使用React
       若是你已经对其中一个用得满意了，就没有必要换了

 

一、设计思路：

　　

 

 

 

 

　　react总体是函数式的思想，把组件设计成纯组件，状态和逻辑经过参数传入，因此在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState以后会从新走渲染的流程，若是shouldComponentUpdate返回的是true，就继续渲染，若是返回了false，就不会从新渲染，PureComponent就是重写了shouldComponentUpdate，而后在里面做了props和state的浅层对比。

　　而vue的思想是响应式的，也就是基因而数据可变的，经过对每个属性创建Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

　　总之，react的性能优化须要手动去作，而vue的性能优化是自动的，可是vue的响应式机制也有问题，就是当state特别多的时候，Watcher也会不少，会致使卡顿，因此 大型应用（状态特别多的）通常用react，更加可控。

 

二、简单能用就行-Vue：

　　Vue项目不须要转译可直接在浏览器中使用，这使得在项目中使用Vue能够像使用jQuery同样容易。固然这对于React来讲在技术上也是可行的，但典型的React代码是更多地依赖于JSX和诸如class等ES6特性的。而Vue的简单则是更深层地源于其设计的。让咱们来比较一下这两个框架是如何处理应用数据的（即“state”）：

　　React里的状态（state）是不可变（immutable）的，所以你不能直接地改变它，而是要用setState API方法：

this.setState({ 
    message: this.state.message.split('').reverse().join('') 
});

　　React是经过比较当前状态和前一个状态的区别来决定什么时候及如何从新渲染DOM的内容，所以须要使用不可变的状态。　　

　　而与此相反的是，Vue中的数据是可变的（mutated），因此一样的数据变量能够用简洁得多的方式修改：

// Note that data properties are available as properties of 
// the Vue instance

this.message = this.message.split('').reverse().join('');

　　让咱们来看看Vue中是如何对状态进行管理的：当你向状态中添加一个新对象时，Vue将遍历其中的全部属性而且将它们转换为getter，setter方法。因而Vue的响应系统开始保持对该状态的跟踪，当该状态的内容发生变化的时候就会自动从新渲染DOM。使人佩服的是，Vue中改变状态的操做不只更加简洁，并且它的从新渲染系统实际上比React的更快更高效。

　　不过Vue的响应系统仍是有些坑的，好比它没法检测属性的添加和删除，以及某些数组更改。这时候就要用Vue API中的相似于React的set方法的措施来解决。

 

3、页面编写方式：

　　模板搭建应用。

　　Vue应用的默认选项是把markup放入HTML文件中。数据绑定表达式使用的是与Angular类似的双大括号（moustache）语法，而指令（特殊的HTML属性）则用于向模板中添加功能。

　　

//HTML
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

//JS
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('');
    }
  }
});

　　React应用不使用模板。而是使用JSX在JavaScript中建立DOM。JS操做一切

//HTML
<div id="app"></div>

//JS
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello React.js!'
    };
  }
  reverseMessage() {
    this.setState({ 
      message: this.state.message.split('').reverse().join('') 
    });
  }
  render() {
    return (
      <div>
        <p>{this.state.message}</p>
        <button onClick={() => this.reverseMessage()}>
          Reverse Message
        </button>
      </div>
    )
  }
}

ReactDOM.render(App, document.getElementById('app'));

　　对于来自标准Web开发的新开发者来讲，vue是把html，css，js组合到一块儿，用各自的处理方式，vue有单文件组件，能够把html、css、js写到一个文件中，html提供了模板引擎来处理，模板更容易理解。然而甚至连一些资深的开发者也喜欢使用模板，由于模板能更好地把功能和布局分割开来，还为使用Pug之类的模板引擎提供了可能。

　　不过使用模板的代价在于你须要学习全部的HTML扩展语法，而渲染函数（render function）只要求会使用标准的HTML和JavaScript。并且比起模板，渲染函数更易于调试和测试。可是，你并不该该所以就错过Vue，由于在Vue2.0中已经提供了使用模板或者渲染函数的选项。

 

3、类式的组件写法，仍是声明式的写法：

　　react是类式的写法，api不多，

　　

 

image.png

而vue是声明式的写法，经过传入各类options，api和参数都不少。因此react结合typescript更容易一块儿写，vue稍微复杂。

 

image.png

vue结合vue-class-component也能够实现类式的写法，可是仍是须要经过decorator来添加声明，并不纯粹。

 

 

react能够经过高阶组件（Higher Order Components--HOC）来扩展，而vue须要经过mixins来扩展
一个react高阶组件的例子：

 

 

 

 

vue的mixin的例子：

 

image.png

React刚开始也有mixin的写法，经过React.createClass的api，不过如今不多用了。
Vue也不是不能实现高阶组件，只是特别麻烦，由于Vue对与组件的option作了各类处理，想实现高阶组件就要知道每个option是怎么处理的，而后正确的设置。具体有多复杂，能够参考下面的文章。
http://hcysun.me/2018/01/05/%E6%8E%A2%E7%B4%A2Vue%E9%AB%98%E9%98%B6%E7%BB%84%E4%BB%B6/

 

咱们发现，Vue的优点包括：

• 模板和渲染函数的弹性选择

• 简单的语法及项目建立

• 更快的渲染速度和更小的体积

React的优点包括：

• 更适用于大型应用和更好的可测试性

• 同时适用于Web端和原生App

• 更大的生态圈带来的更多支持和工具

而实际上，React和Vue都是很是优秀的框架，它们之间的类似之处多过不一样之处，而且它们大部分最棒的功能是相通的：

• 利用虚拟DOM实现快速渲染

• 轻量级

• 响应式组件

• 服务器端渲染

• 易于集成路由工具，打包工具以及状态管理工具

• 优秀的支持和社区