React还是Vue？-白红宇

React还是Vue？

阅读量：6483 次

发布时间：2019-06-23

本文共 4710 字，大约阅读时间需要 15 分钟。

原文链接：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，还发布了一些在线教程，即

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

Alexis曾经问我：“为什么你这么喜欢Vue，从来不用React？”。由于我不太了解React，我很难回答这个问题。所以，我决定，一起坐下来，展示我们选择的库，看看它们究竟能提供什么东西。

图片描述

经过激烈的讨论和互相学习，我们得出了以下6个结论。

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

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


      
     {
   { message }}
  
     
    
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 (      
            
     {this.state.message}
        
           
    
    )  }}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 instancethis.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 (             
                     
     
      Hello, React Native!
           
        );     }}AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

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

阿里巴巴的Weex是另一个跨平台UI项目。目前，它认为Vue提供了灵感，并且使用了很多相同的语法，并计划完全集成Vue。但是，这个计划的时间表和细节尚未清晰。

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