2016 年 React 巩固了它作为前端框架之王的地位, 这一年中可以看到它在 web 端和移动端的快速成长, 同时稳稳领先于它的主要竞争对手 Angular.
但是 2016 对 vue 来说也是同样令人印象深刻的一年, 它发布了 Vue 2.0 版本并且在 JavaScript 社区引起了巨大反响, GitHub 上多出的 25000 颗 star 就是最好的证明.
React 和 Vue 的适用范围无疑是很相似的: 同样是基于组件的轻量级框架, 同样专注于用户界面的视图层. 同样可以用在简单的项目中, 也同样可以使用全家桶扩展为复杂的应用程序.
因为, 很多 Web 开发者想知道他们应该使用哪个框架. 是其中一个明显优于另一个? 还是他们有各自的优点和坑? 或者他们基本就是一个样?
两个框架 两个拥护者
在本文中, 我想用一次公平, 彻底的对比来回答上面的疑问. 但是唯一的问题是我是一个 Vue 粉丝, 完全不够客观. 今年我在项目中重度使用 Vue, 在 Medium 上大加赞赏, 甚至还发布了 Udemy 课程
为了平衡我的偏见, 我叫上了我的朋友 Alexis Mangin, 他是一个很牛的 JavaScript 开发者, 同时也是一个 React 铁粉. 他同样沉浸于 React 中, 经常在 Web 端和移动端的项目中使用.
有一天 Alexis 问我:"为什么你这么中意 Vue, 而不是 React 呢?" 那时候我不太了解 React, 没办法给出一个好的答案. 所以我出了一个主意, 找一天时间, 带上笔记本电脑, 互相介绍一下彼此做出选择的原因.
经过大量的讨论和和互相学习后, 我们找到了 6 个关键点.
如果你喜欢用模板搭建应用(或者有这个想法), 请选择 Vue
Vue 应用的默认选项是把 markup 放在 html 文件中. 数据绑定表达式采用的是和 Angular 相似的 mustache 语法, 而指令 (特殊的 HTML 属性) 用来向模板添加功能.
下面的示例是一个简单的 Vue 应用. 它会展示 message 和一个用来 reverse message 的按钮:
- // HTML
- {{ message }}
- Reverse Message
- // JS
- new Vue({
- el: '#app',
- data: {
- message: 'Hello vue.js!'
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('');
- }
- }
- });
相比之下, React 应用不使用模板, 它要求开发者借助 JSX 在 JavaScript 中创建 DOM. 下面是用 React 实现的同样的应用:
- // HTML
- // 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 (
- {this.state.message}
- this.reverseMessage()}>
- Reverse Message
- )
- }
- }
- ReactDOM.render(App, document.getElementById('app'));
对于来自标准 Web 开发方式的新开发者, 模板更容易理解. 但是一些资深开发者也喜欢模板, 因为模板可以更好的把布局和功能分割开来, 还可以使用 Pug 之类的模板引擎.
但是使用模板的代价是不得不学习所有的 HTML 扩展语法, 而渲染函数只需要会标准的 HTML 和 JavaScript. 而且比起模板, 渲染函数更加容易调试和测试. 当然你不应该因为这方面的原因错过 Vue, 因为在 Vue2.0 中提供了使用模板或者渲染函数的选项.
如果你喜欢简单和 "能用就行" 的东西, 请选择 Vue
一个简单的 Vue 项目可以不需要转译直接运行在浏览器中, 所以使用 Vue 可以像使用 jQuery 一样简单. 当然这对于 React 来说在技术上也是可行的, 但是典型的 React 代码是重度依赖于 JSX 和诸如 class 之类的 ES6 特性的.
Vue 的简单在程序设计的时候体现更深, 让我们来比较一下两个框架是怎样处理应用数据的(也就是 state).
React 中的 state 是不可变 (immutable) 的, 所以不能直接改变, 需要使用 API 中的 setState 方法:
- this.setState({
- message: this.state.message.split('').reverse().join('')
- });
React 中是通过比较当前 state 和前一个 state 来决定何时在 DOM 中进行重渲染以及渲染的内容, 因此需要不可变 (immutable) 的 state.
Vue 中的数据是可变 (mutated) 的, 所以同样的操作看起来更加简洁.
- // Note that data properties are available as properties of
- // the Vue instance
- this.message = this.message.split('').reverse().join('');
让我们来看看 Vue 中是如何进行状态管理的. 当向 state 添加一个新对象的时候, Vue 将遍历其中的所有属性并且转换为 getter,setter 方法, 现在 Vue 的响应系统开始保持对 state 的跟踪了, 当 state 中的内容发生变化的时候就会自动重新渲染 DOM. 令人称道的是, Vue 中改变 state 的状态的操作不仅更加简洁, 而且它的重新渲染系统也比 React 的更快更有效率.
Vue 的响应系统还有有些坑的, 例如: 它不能检测属性的添加和删除和某些数组更改. 这时候就要用到 Vue API 中的类似于 React 的 set 方法来解决.
如果你想要你的应用尽可能的小和快, 请选择 Vue
当应用程序的状态改变时, React 和 Vue 都将构建一个虚拟 DOM 并同步到真实 DOM 中. 两者都有各自的方法优化这个过程.
Vue 核心开发者提供了一个 benchmark 测试, 可以看出 Vue 的渲染系统比 React 的更快. 测试方法是 10000 个项目的列表渲染 100 次, 结果如下图.
从实用的观点来看, 这种 benchmark 只和边缘情况有关, 大部分应用程序中不会经常进行这种操作, 所以这不应该被视为一个重要的比较点. 但是, 页面大小是与所有项目有关的, 这方面 Vue 再次领先, 它目前的版本压缩后只有 25.6KB.React 要实现同样的功能, 你需要 React DOM(37.4KB)和 React with Addon 库(11.4KB), 共计 44.8KB, 几乎是 Vue 的两倍大. 双倍的体积并不能带来双倍的功能.
如果你打算构建一个大型应用程序, 请选择 React
像文章开头那种同时用 Vue 和 React 实现的简单应用程序, 可能会让一个开发者潜意识中更加倾向于 Vue. 这是因为基于模板的应用程序第一眼看上去更加好理解, 而且能很快跑起来. 但是这些好处引入的技术债会阻碍应用扩展到更大的规模. 模板容易出现很难注意到的运行时错误, 同时也很难去测试, 重构和分解.
相比之下, JavaScript 模板可以组织成具有很好的分解性和干 (DRY) 代码的组件, 干代码的可重用性和可测试性更好. Vue 也有组件系统和渲染函数, 但是 React 的渲染系统可配置性更强, 还有诸如浅 (shallow) 渲染的特性, 和 React 的测试工具结合起来使用, 使代码的可测试性和可维护性更好.
与此同时, React 的 immutable 应用状态可能写起来不够简洁, 但它在大型应用中意义非凡, 因为透明度和可测试性在大型项目中变得至关重要.
如果你想要一个同时适用于 Web 端和原生 App 的框架, 请选择 React
React Native 是一个使用 JavaScript 构建移动端原生应用程序 (iOS,Android) 的库. 它与 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 (
- Hello, React Native!
- );
- }
- }
- AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
它的意义在于, 开发者只需要一套知识和工具就能开发 Web 应用和移动端原生应用. 如果你想同时做 Web 端开发和移动端开发, React 为你准备了一份大礼.
阿里的 Weex 也是一个跨平台 UI 项目, 目前它以 Vue 为灵感, 使用了许多相同的语法, 同时计划在未来完全集成 Vue, 然而集成的时间和细节还不清楚. 因为 Vue 将 HTML 模板作为它设计的核心部分, 并且现有特性不支持自定义渲染, 因此很难看出目前的 Vue.JS 的跨平台能力能像 React 和 React Native 一样强大.
如果你想要最大的生态系统, 请选择 React
毫无疑问, React 是目前最受欢迎的前端框架. 它在 NPM 上每个月的下载量超过了 250 万次, 相比之下, Vue 是 22.5 万次.
人气不仅仅是一个肤浅的数字, 这意味着更多的文章, 教程和更多 Stack Overflow 的解答, 还意味有着更多的工具和插件可以在项目中使用, 让开发者不再孤立无援.
这两个框架都是开源的, 但是 React 诞生于 Facebook, 有 Facebook 背书, 它的开发者和 Facebook 都承诺会持续维护 React. 相比之下, Vue 是独立开发者尤雨溪的作品. 尤雨溪目前在全职维护 Vue, 也有一些公司资助 Vue, 但是规模和 Facebook 和 Google 没得比. 不过请对 Vue 的团队放心, 它的小规模和独立性并没有成为劣势, Vue 有着固定的发布周期, 甚至更令人称道的是, GitHub 上 Vue 只有 54 个 open issue,3456 个 closed issue, 作为对比, React 有多达 530 个 open issue,3447 个 closed issue.
如果你已经用其中一个用的很爽, 就别变了.
总结一下, 我们发现的, Vue 的优势是:
模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积
React 的优势是:
更适合大型应用和更好的可测试性 Web 端和移动端原生 App 通吃更大的生态系统, 更多的支持和好用的工具.
然而, React 和 Vue 都是很优秀的框架, 它们之间的相似之处多过不同之处, 并且大部分的优秀功能是相通的:
用虚拟 DOM 实现快速渲染轻量级响应式组件服务端渲染集成路由工具, 打包工具, 状态管理工具的难度低优秀的支持和社区.
来源: http://developer.51cto.com/art/201907/599097.htm