在2016年React已经牢牢占据着JavaScript框架之王的地位，它的web和native app库快速增长，甩它的主要竞争对手angular几条街。

但是对Vue来说，2016同样是一个快速增长的一年，在github上获得了超越25000个star，特别是2.0的发布极大的鼓舞了Vue社区。

React和Vue的范围是不可否认的类似的：两者都是基于轻量级组件的库，用于构建仅专注于视图层的用户界面。两者都可以在一个简单的项目中使用，或使用尖端工具扩展到一个复杂的应用程序。

因此，很多Web开发人员想知道他们应该使用哪一个。是一个明显优于另一个？他们有具体的利弊吗？还是他们基本上是一样的？

两个框架，两个倡导者。

在这篇文章中，我想用一个彻底和公平的比较回答这些问题。唯一的问题是：我是一个痴迷的Vue粉丝，可能带有偏见。我今年在我的项目中大量使用了Vue，在Medium上表示赞赏，甚至发布了Udemy课程。

为了平衡我的偏见位置，我带了我的朋友Alexis Mangin，他是一个伟大的JavaScript开发人员和一个入迷的React粉丝。他同样沉浸在React中，经常在网络和移动项目中使用它。

Alexis问我：“你为什么这么喜欢Vue，而不是React？”由于我不知道React，我不能给一个好的答案。所以有一天我们坐下来，拿出我们的笔记本电脑，互相展示我们选择的框架的代码。

经过我们的讨论，我们得出了下面的六个关键点。

如果你喜欢用模板构建应用程序（或想要），那就选Vue。

将您的标记放在HTML文件中是Vue应用程序的默认选项。与Angular类似，大括号用于数据绑定表达式，而指令（特殊HTML属性）用于向模板添加功能。

下面演示了一个简单的Vue应用程序。它打印一条消息，并有一个动态反转消息的按钮：

// 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应用程序回避模板，并要求开发人员在Javascript中创建他们的DOM，通常辅以JSX。下面是使用React实现的同一个简单应用程序：

// HTML
<div id="app"></div>
// JS (pre-transpilation)
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，因为它在版本2中使用了模板和渲染函数的双重选项。

如果你喜欢简单和“只是工作”的东西，选Vue。

一个简单的Vue项目可以直接从浏览器运行，而不需要转义。这允许Vue很容易被放到一个项目中就像jQuery一样。

虽然这在React技术上也是可能的，但是典型的React代码更倾向于JSX和ES6特性，如类和非突变数组方法。

但Vue的简单性在其设计中更深入。让我们比较两个库如何处理应用程序数据（即“状态”）。

React中的状态是不可变的，因此您不能直接更改它。您需要使用setState API方法：

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 设置器。 Vue的反应系统现在保持跟踪状态，并会在变异时自动重新渲染DOM。

令人印象深刻的是，改变Vue中的状态不仅更加简洁，而且它的重新呈现系统实际上比React更快更有效。

Vue的反应系统确实有警告。例如，它不能检测属性添加或删除以及某些数组更改。这些情况可以使用Vue API中的类似React的set方法来解决。

如果你需要你的应用程序尽可能小、快速，选Vue。

当应用程序的状态改变时，React和Vue都将构建一个虚拟DOM并同步真正的DOM。两者都有自己的优化这个过程的方法。

Vue核心开发人员提供了一个基准测试，显示Vue的渲染系统要比React更快。在这个测试中，10000个项目的列表被呈现100次。比较如下表所示。

从实用的观点来看，这种基准只与边缘情况有关。大多数应用程序不需要进行这种操作，所以它通常不应该被认为是一个重要的比较点。

页面大小，虽然是与所有项目相关，Vue再次有优势。 Minified版本的Vue库只有25.6KB。

要在React中获得类似的功能集，您需要React DOM（37.4KB）和React with Addons库（11.4KB），总计48.8KB，几乎是Vue的两倍。为了公平起见，你会得到一个更强大的React的API，但你不会得到双倍的功能。

如果有计划构建一个大规模的可扩展的应用程序，选React。

比较在Vue和React中实现的简单应用程序，比如本文开头的一个应用程序，可能最初会偏向开发者偏好Vue。这是因为基于模板的应用程序在初看起来更容易理解，并且更快启动和运行。

但这些最初的好处带来了技术债务，可以减缓应用程序的发展到更大规模。模板容易出现未被注意的运行时错误，难以测试，并且不易于重构或分解。

相比之下，Javascript模板可以组织成具有很好的分解和DRY代码的组件，这些代码更可重用和可测试。

Vue还有一个组件系统和渲染函数。但是React的渲染系统更具可配置性，并且具有浅渲染的功能，结合React的测试工具，允许更多的可测试和可维护的代码。

同时，React的不可变的应用数据可能不是那么简洁，但是当透明度和可测性变得至关重要时，它在更大的应用中发光。

如果你想要一个适用于Web和原生应用程序的库，请使用React。

React Native是一个使用Javascript构建本地移动应用程序的库。它与React.js相同，只是不使用Web组件，它使用原生组件。如果你学习了React.js，你将很容易能够选择React Native，反之亦然。

// JS
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或本机移动设备上构建应用程序，而无需使用不同的知识和工具。如果你打算为web和移动开发，学习React给你一个巨大的轰动。

阿里巴巴的Weex是另一个跨平台的UI项目。目前它认为Vue是一个“灵感”，并使用了很多相同的语法，计划完全集成Vue。然而，这种整合的时间表和细节仍然不清楚。

由于Vue将HTML模板作为其设计的核心部分，并且没有作为当前功能的自定义呈现，因此很难看出，当前形式的Vue.js的原生对象与React.js和React一样紧密联系原生对象。

如果你想要最大的生态系统，去React。

毫无疑问，React是目前更受欢迎的库，每月大约有2.5M的NPM下载，而Vue每月大约225K。

人气不仅仅是一个微弱的好处。这意味着有更多的文章，教程和Stack Overflow的帮助。这意味着有更多的工具和附件在项目中利用，并节省开发人员自己构建一切。

这两个库都是开源的，但React从Facebook诞生，并从这个赞助中受益。开发商和公司承诺React可以放心继续维护。

相比之下，Vue是由单个开发人员Evan You创建的，而他现在是Vue的唯一全职维护者。 Vue有一些公司赞助，但不是在Facebook或Google的规模。

为了Vue团队的信誉，它的小尺寸和独立性并没有实现为劣势。 Vue有一个定期发布周期，更令人印象深刻的是，Vue在Github上只有54个open问题，而3456个关闭的问题，而相比React有一个大得多的530个open问题，3447关闭。

如果你已经对一个或另一个使用得很愉快，那没有必要切换。

总结一下，我们的发现，Vue的优势是：

灵活的模板或渲染功能选项
语法和项目设置的简单性
更快的渲染和更小的尺寸

React的优势：

更好的规模，studier和更多的可测试
Web和原生应用程序
更大的生态系统，更多的支持和可用的工具

然而，React和Vue都是例外的UI库，并且具有比差异更多的相似性。他们的大多数最好的功能是共享的：

使用虚拟DOM快速渲染
轻量级
反应成分
服务器端呈现
与路由器，bundler和状态管理轻松集成
大力支持和社区

如果你认为我们错过了一些，我们希望听到您在评论里指出。快乐开发！

作者：曾小乱

喜欢写点有意思的东西查看曾小乱的所有文章

一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

React或Vue：你应该用哪个UI库？

两个框架，两个倡导者。

如果你喜欢用模板构建应用程序（或想要），那就选Vue。

如果你喜欢简单和“只是工作”的东西，选Vue。

如果你需要你的应用程序尽可能小、快速，选Vue。

如果有计划构建一个大规模的可扩展的应用程序，选React。

如果你想要最大的生态系统，去React。

如果你已经对一个或另一个使用得很愉快，那没有必要切换。

作者：曾小乱

发表回复取消回复

两个框架，两个倡导者。

如果你喜欢用模板构建应用程序（或想要），那就选Vue。

如果你喜欢简单和“只是工作”的东西，选Vue。

如果你需要你的应用程序尽可能小、快速，选Vue。

如果有计划构建一个大规模的可扩展的应用程序，选React。

如果你想要最大的生态系统，去React。

如果你已经对一个或另一个使用得很愉快，那没有必要切换。

作者： 曾小乱

发表回复 取消回复

作者：曾小乱

发表回复取消回复