React仍是Vue？

原文连接：React or Vue: Which Javascript UI Library Should You Be Using? | Codementor
做者：Anthony Gore
译者：sunny
转载需提早联系译者，未经容许不得转载。
本文首发于前端指南

2016年，React巩固了它JavaScript web框架之王的地位。在这一年里，Web和原生APP的库都迅速发展，同时与Angular相比，也具备明显优点。

与此同时，2016年对于Vue而言，也是很重要的一年。Vue2的发布给JavaScript社区带来了巨大的冲击，在Github上得到了25000个star。

不能否认，React和Vue的范围十分相似：它们都是轻量级的组件库，都用于构建用户界面，专一于视图层。二者均可以在简单项目中，也可使用工具将它们扩展为复杂的应用程序。

所以，不少web开发人员都想知道，到底应该选择哪个？一个明显优于另外一个？有什么须要注意的利弊吗？仍是说，二者基本相同？

两个框架，两个倡导者

在本文中，我想完全地公正地比较二者以前的区别。惟一的问题就是：我是Vue的爱好者，必然会有一些偏见。我常常在个人项目中使用Vue，还发布了一些在线教程，即Ultimate Vue.js Developers course

为了摆脱我偏见的影响，我找到了个人朋友Alexis Mangin，他是一名优秀的JavaScript开发者，也是React的爱好者。他沉浸在React中，常常在Web和移动APP开发中使用React。

Alexis曾经问我：“为何你这么喜欢Vue，历来不用React？”。因为我不太了解React，我很难回答这个问题。因此，我决定，一块儿坐下来，展现咱们选择的库，看看它们究竟能提供什么东西。

通过激烈的讨论和互相学习，咱们得出了如下6个结论。

若是你喜欢使用模板（ 或须要一些其中的选项）构建应用程序，那么请选择Vue

将标记放在HTML文件中是Vue应用程序的默认选项。与Angular相似，大括号用于数据绑定表达式，指令（特殊的HTML属性）用于向模板添加功能。下面是一个简单的Vue程序例子。它能够输出一条消息，有一个按钮能够动态反转消息：

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

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

相比之下，React应用程序避开模板，要求开放人员在JavaScript中建立DOM，一般用JSX辅助，下面是用React来实现一样的功能：

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初级开发者而言，模板更容易理解。可是也有不少经验丰富的开发人员乐意使用模板，由于模板能够更好地分离布局和功能，同时也能够选择向Pug这样的预处理器。

可是，使用模板须要学习全部的HTML扩展语法，渲染函数只须要了解标准的HTML和JavaScript

若是你喜欢简单的能正常工做的，那么请选择Vue

一个简单的Vue项目能够不须要解析，直接在浏览器中运行，这容许Vue能够像jQuery同样在项目中引用。

虽然在技术上使用React也是可行的，可是典型的React代码更倾向于像classes和non-mulating 数组方法这样的JSX和ES6的特性。可是Vue在简洁设计方面更为深刻。咱们来比较二者如何处理应用程序的数据（即“状态”）。

在React中State是不能够直接改变的，须要调用setState接口：

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

当前和以前的状态差别让React知道何时在DOM中从新渲染以及渲染什么，所以不可变的状态是很是必要的。

相比之下，数据能够在Vue中突变。相同的数据属性在Vue中发生变化更为简单。

// Note that data properties are available as properties of 
// the Vue instance
this.message = this.message.split('').reverse().join('');

在你得出Vue渲染系统比React渲染低效的结论以前，让咱们来看看Vue中的状态管理：当你向状态添加新对象时，Vue会遍历它的全部属性而且转换为getter和setter。Vue系统会持续追踪状态而且在状态发生变化时，自动从新渲染DOM。

使人印象深入的是，Vue中的状态改变动为简洁的同时，从新渲染系统的效率其实比React更好。

Vue的反应系统确实有值得注意的事项。例如：它不能检测到属性的添加、删除以及特定数组的变化。在这种状况下，可使用Vue API中相似React的set方法。

若是你但愿你的程序更小更快，那么请选择Vue

React和Vue都将构建一个虚拟DOM，而且在应用程序状态更改时同步更新实际的DOM。二者都有本身的优化方法。Vue核心开发人员提供了一个基准测试，展现了Vue的渲染系统比React的更快。在这个测试中，10000个项目的列表被渲染了100次。下面的表格展现了比较的结果。

从实际角度而言，这种基准只与边缘状况有关。大多数应用程序不须要常常进行这种操做，所以不能将其视为比较的一个重要因素。

虽然页面的大小与项目相关，Vue又占据了优点。目前发布的Vue库只有25.6KB。

要用React实现相似的功能，你须要使用React DOM（37.4KB）和React with Addons库（11.4KB），总共为48.8KB，几乎是Vue的两倍。为了公平起见，你可使用React得到更多的API，可是不会有双倍的功能。

若是你想要构建大型应用程序，那么请选择React

用Vue和React来实现简单的应用程序，就像本文开头所说的同样，大部分开发者会偏向于Vue。这是由于基于模板的应用程序乍看更容易理解，而且可以更快启动。

可是这些初始的好处会致使大型程序进展缓慢。模板很容易出现运行时错误，难以测试，也不容易重构或分解。

相比之下，JavaScript制做的模板能够被组织成可分解的组件，DRY code也更容易重用和测试。

Vue也具备组件系统和渲染功能。可是React的渲染系统配置性更高，而且具备浅渲染的特性，与React的测试程序结合时，能够提供更多可测试和可维护的代码。

同时，React不可变的代码并不简单，当透明度和可测试性相当重要时，它会发挥更大的做用。

若是你想要一个同时适用于web和原生APP的库，那么请选择React

React Native是用JavaScript建立原生APP的库。它与React相同，只是将web组件换成了原生组件。若是你学习了React.js，那么你很快就能够学会React Native，反之亦然。

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native';  
class HelloWorld extends Component {   
  render() {     
    return (       
      <View>         
        <Text>Hello, React Native!</Text>
      </View>
    );   
  }
}
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

重要的是，开发人员能够构建一个web或者原生APP，他们不须要不一样的知识体系和工具。若是您打算开发web和移动APP，React会给你带来巨大冲击。

阿里巴巴的Weex是另外一个跨平台UI项目。目前，它认为Vue提供了灵感，而且使用了不少相同的语法，并计划彻底集成Vue。可是，这个计划的时间表和细节还没有清晰。

因为Vue将HTML模板做为其设计的核心部分，也没有将客户端渲染做为当前的特性，所以很难看到原生的Vue像React.js或React Native同样紧密。

若是你想要最大的生态系统，那么请选择React

毫无疑问，React目前是最受欢迎的库，NPM下载量每个月约2.5M，Vue每个月的下载量为225k。

人气带来的好处不止一点半点。这意味有更多的文章、教程和Stack Overflow回答可以帮助。也意味着在项目中有更多的工具和附加组件可用，同时节省了开发人员本身构建全部模块的时间。

二者都是开源的，可是React诞生自Facebook，受益于它。开发者和热爱React的公司均可以保障React一直被维护。

相比之下，Evan You一我的建立了Vue，同时他也是Vue惟一的全职维护人员。Vue获得了一些企业的赞助，可是还达不到Facebook或是Google的规模。

为了使得Vue团队更为可信，它的小体积和独立性目前并不被当作劣势。Vue有规律的发布周期，使人印象深入的是，Vue在Github上只有54个公开的问题，3456个关闭的问题，而React有530个开放问题，3447个关闭的问题。

若是你已经选择了其中的一个，那么也不须要换了

总而言之，咱们发现，Vue的优点是：

• 模板或渲染的灵活选项

• 语法以及项目设置的简单

• 渲染速度更快，体积更小

React的优点是：

• 更大的规模、更多的使用者、更好的可测试性

• Web和原生APP

• 能提供更多支持和工具的更大的生态系统

然而，React和Vue都是优秀的UI库，而且具备更多的类似之处。它们都有的优点是：

• 使用虚拟DOM快速渲染

• 轻量级

• 响应式组件

• 服务端渲染

• 轻松集成的的路由、捆绑和状态管理

• 强大的支持和社区

若是你认为咱们漏掉了一些东西，欢迎在评论中说明。Happy developing！