当前位置: 首页 > 科技观察

React还是Vue:你如何选择?

时间:2023-03-12 02:24:43 科技观察

本文翻译自ReactorVue:WhichJavascriptUILibraryShouldYouBeUsing?,原文需翻墙。2016年,React巩固了前端框架之王的地位。这一年,可以看出它在Web端和移动端的快速成长,并且牢牢领先于它的主要竞争对手Angular。但2016年对于Vue来说同样是令人印象深刻的一年,它发布了Vue2.0,并在JavaScript社区引起了巨大反响,GitHub上的星数超过25,000就是明证。React和Vue的适用范围无疑是非常相似的:同样是基于组件的轻量级框架,同样专注于用户界面的视图层。也可以用在简单的项目中,也可以用全家桶扩展到复杂的应用中。因为,许多Web开发人员想知道他们应该使用哪个框架。其中一个明显优于另一个吗?或者它们各有优缺点?或者它们基本相同?两个框架两个倡导者在这篇文章中,我想通过公平和彻底的比较来回答上述问题。但唯一的问题是,我是一个Vue爱好者,一点都不客观。今年我在项目中大量使用Vue,在Medium上称赞它,甚至发布了一个Udemy课程。为了平衡我的偏见,我打电话给我的朋友AlexisMangin,他是一位出色的JavaScript开发人员和React粉丝。他还沉浸在React中,经常在Web和移动项目中使用它。有一天Alexis问我:“为什么你这么喜欢Vue而不是React?”当时我对React了解不多,所以没法给出很好的回答。于是灵机一动,找一天,带上笔记本电脑,互相介绍一下对方做出选择的理由。经过大量的讨论和相互学习,我们找到了6个关键点。如果你喜欢从模板构建应用程序(或有想法),请选择Vue。Vue应用程序的默认选项是将标记放在HTML文件中。数据绑定表达式使用类似于Angular的mustache语法,而指令(特殊的HTML属性)用于向模板添加功能。下面的示例是一个简单的Vue应用程序。它将显示消息和一个用于反转消息的按钮://HTML

{{message}}

ReverseMessage
//JSnewVue({el:'#app',data:{message:'HelloVue.js!'},methods:{reverseMessage:function(){this.message=this.message.split('').reverse().join('');}}});相比之下,React应用程序不使用模板,需要开发人员借助JSX在JavaScript中创建DOM。这是用React实现的同一个应用程序://HTML
//JS(pre-transpilation)classAppextendsReact.Component{constructor(props){super(props);this.state={消息:'HelloReact.js!'};}reverseMessage(){this.setState({message:this.state.message.split('').reverse().join('')});}render(){return(

{this.state.message}

this.reverseMessage()}>ReverseMessage
)}}ReactDOM。呈现(App,document.getElementById('app'));对于来自标准Web开发方式的新开发人员来说,模板更容易理解。但是一些资深的开发者也喜欢模板,因为模板可以更好的分离布局和功能,也可以使用Pug等模板引擎。但是使用模板的代价是你必须学会??所有的HTML扩展语法,渲染功能只需要懂标准的HTML和JavaScript。此外,渲染函数比模板更容易调试和测试。当然你不应该因此而错过Vue,因为在Vue2.0中有使用模板或渲染函数的选项。如果你喜欢简单的东西,“justworks”,选择Vue一个简单的Vue项目可以直接在浏览器中运行,无需翻译,因此使用Vue可以像使用jQuery一样简单。当然,这在React技术上是可行的,但典型的React代码在很大程度上依赖于JSX和ES6特性,比如类。Vue的简洁体现在程序设计上。让我们比较一下这两个框架如何处理应用程序数据(即状态)。React中的状态是不可变的(immutable),所以不能直接改变。您需要使用API中的setState方法:this.setState({message:this.state.message.split('').reverse().join('')});React将当前状态与之前的状态进行比较,以决定何时重新渲染和渲染DOM中的内容,因此需要一个不可变的状态。Vue中的数据是变异的,所以同样的操作看起来更简洁。//请注意,数据属性可用作//Vue实例的属性this.message=this.message.split('').reverse().join('');让我们看看Vue中是如何进行状态管理的。当向状态添加新对象时,Vue会遍历其中的所有属性,并将它们转换为getter和setter方法。现在Vue的响应系统开始跟踪状态。当状态中的内容发生变化时,它会自动重新渲染DOM。值得称赞的是,Vue中改变状态的操作不仅更加简洁,其重新渲染系统也比React更快、更高效。Vue的响应系统还是有一些坑,比如:不能检测到属性的增减和某些数组的变化。这时候就需要借助VueAPI中类似React的set方法来解决了。如果您希望您的应用程序尽可能小和快,请选择Vue。当应用程序的状态发生变化时,React和Vue都会构建一个虚拟DOM并将其同步到真实DOM中。两者都有自己的优化此过程的方法。Vue核心开发者提供了一个基准测试,表明Vue的渲染系统比React的更快。测试方法是渲染10000条的列表100次,结果如下图所示。从实际的角度来看,这种基准测试仅与边缘情况相关,在大多数应用程序中并不经常进行,因此不应将其视为重要的比较点。然而,页面大小与所有项目相关,Vue再次领先,其当前版本压缩后仅为25.6KB。React要实现同样的功能,需要ReactDOM(37.4KB)和ReactwithAddon库(11.4KB),一共44.8KB,几乎是Vue的两倍。双倍的尺寸并不意味着双倍的功能。如果您打算构建大型应用程序,请选择React。文章开头的一个同时使用Vue和React实现的简单应用程序可能会让开发人员下意识地更喜欢Vue。这是因为基于模板的应用程序乍一看更容易理解,并且可以快速启动和运行。但是这些好处引入的技术债务可能会阻止应用程序扩展到更大的规模。模板很容易出现运行时错误,这些错误很难被注意到,也很难测试、重构和分解。相比之下,Javascript模板可以组织成具有良好分解和干燥(DRY)代码的组件,这更易于重用和测试。Vue也有组件系统和渲染功能,但是React的渲染系统更可配置,浅层(shallow)渲染等特性,结合React的测试工具,让代码的可测试性和可维护性更好。同时,React的不可变应用程序状态可能写起来并不简洁,但在大型应用程序中非常有意义,透明性和可测试性在大型项目中变得至关重要。如果您想要一个同时适用于Web和本机应用程序的框架,请选择ReactReactNative是一个用于使用Javascript构建移动本机应用程序(iOS、Android)的库。它和React.js一样,只是不使用Web组件,而是使用原生组件。如果您学习过React.js,您将能够立即开始使用ReactNative,反之亦然。//JSimportReact,{Component}from'react';import{AppRegistry,Text,View}from'react-native';classHelloWorldextendsComponent{render(){return(Hello,ReactNative!);}}AppRegistry.registerComponent('HelloWorld',()=>HelloWorld);它的意义在于开发者只需要一套知识和工具就可以开发web应用和移动原生应用。如果你想同时进行Web开发和移动开发,React已经为你准备了一份很棒的礼物。阿里的Weex也是一个跨平台的UI项目。它目前受到Vue的启发,并使用许多相同的语法。同时,未来计划全面整合Vue,但整合的时间和细节还不清楚。由于Vue以HTML模板作为其设计的核心部分,而现有的特性不支持自定义渲染,很难看出Vue.js目前的跨平台能力可以像React和ReactNative一样强大。如果你想要最大的生态系统,选择ReactReact毫无疑问是最流行的前端框架。它在NPM上的每月下载量超过250万次,而Vue的下载量为225,000次。人气不仅仅是一个表面的数字,它意味着更多的文章、教程和更多的StackOverflow答案,也意味着更多的项目中可以使用的工具和插件,让开发者不再孤单。这两个框架都是开源的,但React是由Facebook诞生并背书的,其开发者和Facebook都致力于继续维护React。相比之下,Vue是独立开发者游雨溪的作品。游玉玺目前全职维护Vue。也有一些公司资助Vue,但规模无法与Facebook和Google相提并论。但请Vue团队放心,它的小规模和独立性并没有成为劣势,Vue有固定的发布周期,更难能可贵的是Vue在Github上只有54个打开的问题和3456个关闭的问题,如在相比之下,React有多达530个未解决的问题和3447个已关闭的问题。如果你已经使用过其中之一并且它非常酷,请不要更改它总结一下,我们发现,Vue的优点是:模板和渲染函数的灵活选择语法和项目配置简单渲染速度更快,体积更小sizeReact的优点是:更适合大型应用和更好的可测试性Web端和移动端原生应用需要所有更大的生态系统,更多的支持和易于使用的工具但是,React和Vue都是优秀的框架,它们之间相同点多于不同点,大部分优秀的功能都是相似的:使用虚拟DOM实现快速渲染轻量级响应式组件服务端渲染集成路由工具、打包工具、状态管理工具低难度优秀的支持和社区随意如果您认为我们遗漏了什么,请在评论中指出。