Vue vs React:哪个框架更好?

英文原文: https://buttercms.com/blog/vue-vs-react-which-is-the-better-framework


在选择Javascript框架和库时,向开发人员提供了许多选项,但事实证明React和Vue是最受欢迎的选择。

最具挑战性的部分是决定使用React或Vue。它们在两种方式上相似,既使用虚拟DOM,又具有 基于组件的反应式结构。

本文将阐述强烈点和两个技术的缺点,从而更加清晰到流行的框架和其中一个最有利的开发人员和业务的增长。

学习曲线:React vs Vue

React采用JSX格式,其中HTML用JavaScript编写。尽管JSX与函数编程(这是一个非常简洁的概念)保持一致,但是开发人员仍然背负着找出这种新方法的责任。

React的核心是精益的,并且在很大程度上依赖于其他第三方组件的有效使用。对于开发人员来说,这也可能是一个痛苦,因为他们需要掌握大量信息才能完成任务。

尽管React的文档很好,但Vue的文档在很大程度上被认为是更好的。

与React相比,Vue更易于学习。Vue以Web开发人员已经习惯的方式分离关注点,将HTML,CSS和JavaScript分离。它还允许想要采用该样式的开发人员使用JSX。

Vue也更容易习惯,因为它挑选了React和Angular的优点。从而使来自两个背景的开发人员更容易完美地适应。

Vue文档也写得很好,并试图回答大多数(如果不是全部)可能出现的问题。

性能

React和Vue都与DOM交互;每次删除或添加DOM元素时,都会对域数据进行更新。此交互是衡量性能的指标。

Vue与React性能测试:2018年

从上表可以看出,React和Vue在几乎相同的时间范围内执行相同的操作。Vue和React的性能之间的差异几乎可以忽略不计,因为相差仅几毫秒。

这证明了Vue和React在性能方面非常相似。

工具和库

状态管理

React可以使用setState()从内部处理状态管理,以设置组件的状态。但是,对于可能增加复杂性和健壮性的应用程序,开发人员可以使用Redux,Mobx和React Context API之类的包来管理状态。这些软件包都不由核心React团队管理。

Redux

import { createStore } from 'redux';
import reducer from './reducers';

const store = createStore(reducer);
function render() {
 ReactDOM.render( … );
}

store.subscribe(render);
render();

另一方面,当要构建的应用相对简单且体积较小时,Vue使用“存储模式”进行状态管理。但是,对于迫切需要共享状态存储的许多组件的大型SPA,Vue提供了一种称为Fuex的类似Flux的体系结构,具有集中存储。

Vuex

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

console.log(store.state.count) // -> 1

Vuex由Vue团队开发和管理,是为Vue用户量身定制的。它的状态管理能力非常具体。

路由

对于路由,React使用react-router库,该库也不由React团队管理。react-router库将应用程序的组件与URL平滑同步。

React Router

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const Contacts = () => (
  <div>
    <h2>Contacts</h2>
  </div>
)

ReactDOM.render(
  <Router>
    <div>
      <aside>
        <Link to={`/`}>Home</Link>
        <Link to={`/contacts`}>Contact Us</Link>
      </aside>

      <main>
        <Route exact path="/" component={Home} />
        <Route path="/contacts" component={Contacts} />
      </main>
    </div>
  </Router>,
  document.getElementById('app')
)

Vue有一个路由库称为Vue- router。Vue路由器是Vue的官方路由器,尽管还有一些其他的第三方路由器,如page.js和Director,而且它与Vue的使用非常无缝。

Vue Router

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/contacts">Contact Us</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {
  template: '<div>Home</div>'
}

const Contacts = {
  template: '<div>Contacts</div>'
}

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/contacts', component: Contacts }
  ]
})

new Vue({
  router
}).$mount('#app')

也可以在不使用任何库的情况下处理路由,但这对于只需要简单路由的应用程序非常有效。

命令行界面

为了方便访问开发环境,React提供了一个CLI,可以轻松启动React 项目。它称为create-react-app。

Vue提供了称为vue-cli的资源,该资源使开发人员能够快速开始新的Vue项目。Vue CLI已经自定义,可以让您在开发生命周期中随时添加插件。

移动和桌面开发

React Native是React很棒的平台,用于构建可在Android和iOS上运行的本机移动应用程序。这真的很棒,因为React开发人员可以利用他们的知识来构建移动应用程序。

在撰写本文时,Vue正在与Weex(一个跨平台的UI框架)合作开发一个功能类似于React Native的平台。目前,Vue有一个称为NativeScript-vue 的NativeScript插件,用于在Vue中构建本机应用程序。

对于构建跨平台的桌面应用程序,Vue可以很容易地与Electron一起使用。使用Vue-CLI作为脚手架,Electron-vue提供了一个样板,其中已经考虑了内部配置。

Vue和React社区和流行度

在Facebook的支持下,与Vue相比,React拥有非常庞大的社区。目前,React在StackOverflow上有超过125,000个问题。它还具有50,000多个npm软件包。

React的社区虽然很大,但是却非常分散,因为开发人员可以自由选择适合他们的结构。这种自由是造成潜在混乱的原因,因此在StackOverflow上记录了大量问题。

React目前在Github上拥有177,500颗星,比Vue少几千颗。GoogleTrends的分析表明,与Vue相比,React在过去12个月中的搜索相关性约为85%。

资料来源:GoogleTrends:2018年2月-2019年2月 Evan You拥有Vue.js并由他的团队进行管理。它在2014年被社区所熟知。社区正在成长,但距离React尚不遥远,但这确实很有希望。关于StackOverflow标记为Vue.js的问题有66,000多个,大约有14,000个npm软件包。Vue在Github上拥有超过122,000星。

结论

React和Vue是非常好的JavaScript技术,是不错的选择,并且对于小型和大型应用程序都非常有用。

React提供了灵活性,是一个热门工作市场,并且与Vue一样稳定。但是,如果CTO将Vue.js作为其开发人员堆栈的一部分引入,则Vue的结构更加合理,更易于查找和设置,从而缩短了项目工期并缩短了加班时间。

Vue提供了清晰的信息,从而预测该框架将等同于React,并可能成为开发人员的首选。

英文原文: https://buttercms.com/blog/vue-vs-react-which-is-the-better-framework

李, 国轩