写点什么

为什么我不再用 Vue,改用 React?

2020 年 6 月 28 日

为什么我不再用Vue,改用React?

当我走进现代前端开发行业的时候,我做了一个每位开发人员都要做的决策:选择正确的框架。那时 jQuery 正在被淘汰,人们不再用它编写难看的、非结构化的老式 JavaScript 程序了。我们正在走进一个时髦的,流行的,模块化的 JavaScript 框架的新时代。所以我选择了 VueJS。


本文最初发布于 Medium 网站,经原作者授权由 InfoQ 中文站翻译并分享。


下面就是我热爱(现在还是爱着)VueJs 的原因所在。


它将 HTML/CSS/JS 结构结合到了一起

目前来看,这是 VueJS 最吸引人的优势。


Vue 文件对初学者非常有吸引力。它易于理解,而且我们很容易将整个 HTML 模板分解为许多 Vue 文件。我一眼就能看出来结构(模板)、行为(脚本)和外观(样式)。


<template><div id="myComponent">  <Counter />  <span v-if="reading">Hello reader !</span></div></template><script>import Counter from "@/components/Counter";export default {  name: "myComponent",  components: {    Counter  }}</script><style>#myDiv {  display: block;}</style>
复制代码


Vuex

我开始了解状态管理系统时是从 Redux 入门的。它很难学,而且似乎过于复杂。但有了 Vuex,体验就太棒了。


Redux 需要 action、reducer 和 store,而 Vuex 只有 action、mutation 和 store。相比 mutation,reducer 的逻辑实在很难理解,因为我学习后者时相关的优秀学习资源很少见。在我看来,Vuex 对于新手来说更容易上手。


NuxtJS

老实说,受 React NextJS 启发的 NuxtJS 是我在 Vue 项目中的默认框架。我喜欢 Nuxt 项目的约定优于配置的架构。


页面位于 page 目录下。组件位于 component 目录。存储在 store 目录中。中间件则在 middleware 目录里,依此类推。


所有注入都是透明的。所有配置都在 nuxt.config.js 里。太棒了!它使你可以轻松构建启用 SSR 的网站和 SPA。


然而,我又试了一下 React

在学习 Vue 之前我也尝试过 React,但后者初看上去太难学了。随着时间推移,我更深入了解了状态管理机制和 ES6 语言规范,于是我对 React 的看法也有了变化。


我看到有很多文章在推荐 React,甚至我周围的人都在谈论 React,所以我尝试了一下。结果很不错,于是我开始在项目中使用这个框架。下面是我眼中 React 一些最明显的优势。


对 ES6 和 TypeScript 友好

开发人员掌控类、接口和枚举。所以我很容易就能理解 React 组件的工作机制,并知道该如何将其集成到应用程序中。


你也可以在 Vue 中使用 ES6 语法,但是 React 比 Vue 设计得更好。看一下如何在 React 中注册组件:


class MyComponent extends React.Component {  render() {    return(<div />)  }}
复制代码


对于 VueJS,你将一个对象传递给 Vue Component 函数:


Vue.component({  template: `<div></div>`})
复制代码


也就是说,现代 React(2020 年)不再用到 class,而是使用函数式组件(和 hooks)。


VueJs 现在提供了 TypeScript 支持。但这种支持不像 React 那样自然,后者只需一条命令就能使用 CRA(Create React App)获得 TS 支持。


在 Vue 这边,我们仍然需要一些带有自定义装饰器和特性的第三方包来创建一个真正完善的 TypeScript 应用程序,并且它的官方文档并未包含入门所需的所有信息。


JSX

JSX 并非恶魔。有两个流派:亲 JSX 和反 JSX。我不想卷进他们的战争。JSX 可以是天使也可以是恶魔,具体取决于你要如何使用模板。


从我的角度来看,对于开发人员来说,编写像下面这样的 JSX 更加合乎逻辑:


return (  <div>    {students.map(student => <p>{student}</p>)}  </div>)
复制代码


比 Vue 的方式更像 HTML:


<div>  <p v-for="student in students">{{ student }}</p></div>
复制代码


萝卜青菜各有所爱;我是觉得 JSX 更强大,更灵活。


省事的 Hooks

我开始学习使用 React 组件做开发。问题在于,要创建单个组件作为一个 React 组件类是很费事的。


class MyComponent extends React.Component {  constructor(props) {    super(props)    this.state = {      counter: 0    }  }  render() {    return(<div/>)  }}
复制代码


函数式组件让你可以使用带有 hooks 的局部状态。它移除了很多样板和无用的构造器。


function MyComponent() {  const [counter, setCounter] = useState(0)    return(<div />)}
复制代码


React Hooks 简化了状态和其他 React 部件(如 useEffect)的应用,现在我们用不着 componentDidMount 和 componentDidUpdate 了。


一些开发人员喜欢 OOP 方法,所以继续使用 class;而其他开发人员则偏爱函数式方法。你可以在项目中同时使用两者


社区

伟大的项目背后都有很多伟大的头脑


根据我的经验,React 的文档、第三方工具和模块要比 Vue 多得多。有时,我会为很多 Nuxt 问题而挣扎许久,搜索解决方案的过程中还会发现很多 Next(React)主题。


看看 Github 仓库,数字可以说明一切。




或它们各自的框架:




如果社区能更快地修复错误,那么你的代码也就会更可靠。和你遇到相同问题的人越多,你解决问题的速度也会越快。


Vue 3 即将到来……

Vue 3 中有很多重大更改,其中之一是 Composition API,有了它你就可以无需 Vuex 来管理状态;还有很多很棒的特性即将到来!


四月份,尤雨溪曾在直播中表示,目前的 Vue 3.0 已经可以投入使用,但是要求开发者自己对稳定性负责。他建议生产项目暂时不要上,新的、小的项目可以试水。


《尤雨溪B站直播,Vue 3.0 Beta是一个值得体验的全新版本》


那么,我喜欢 VueJS 吗?是的。我喜欢 React 吗?喜欢。React 比 Vue 更好吗?那就见仁见智了。


原文链接:


https://medium.com/better-programming/why-did-i-quit-vue-for-react-65315285fd90


2020 年 6 月 28 日 17:1410761

评论 13 条评论

发布
用户头像
很多人说业务需要什么就用什么,我想说公司用什么就用什么。
2020 年 07 月 27 日 10:55
回复
用户头像
无论是哪种语言都是你的自由,你不用vue,别人会用
2020 年 07 月 09 日 16:03
回复
用户头像
永远都是框架适配业务,当业务中Vue无法满足,不管React是否友好,都会使用的,反之亦然。
2020 年 07 月 08 日 18:41
回复
用户头像
不会vue的飘过
2020 年 07 月 03 日 14:21
回复
用户头像
vue太灵活了,像个意气风发的少年;react 的 hooks 风格越来越贴切它的核心理念:view = fn(state),更像一个成熟稳重的中年人。都有特色,用哪个都一样的。
2020 年 06 月 29 日 17:36
回复
用户头像
国内还是选择vue.js
2020 年 06 月 29 日 11:19
回复
用户头像
作为软件开发工程师,正确的态度是:“业务需要什么技术就学习并使用什么技术”,而不是选择阵营站队,一旦对某种技术偏爱,就容易有偏见,这就太狭隘了。
2020 年 06 月 29 日 09:32
回复
赞同~
2020 年 06 月 30 日 11:57
回复
业务用React和Vue有区别吗?本质上都是框架而已
2020 年 06 月 30 日 14:37
回复
不局限于两种框架,只是拿来说事情。比如node.js,那作为前端多少对node有了解,想做全栈开发必然想到node对吧,当然你的业务简单,高并发node都能满足,这没问题。可是你接的业务是个计算密集型的呢?node就不合适了。这个时候只能转向成熟稳重的Java或者其它语言,或者找别人合作。
2020 年 06 月 30 日 17:58
回复
查看更多回复
没有更多了
发现更多内容

MySQL information_schema 系统库介绍

Simon

MySQL

迅雷不及掩耳盗铃

escray

生活记录 8月日更 搜房记

spring-boot 2.5.4,nacos 作为配置、服务发现中心,Cloud Native Buildpacks 打包镜像,GitLab CI/CD

Zhang

gitlab nacos CI/CD spring-boot 2.5.4 CNB

python通过Matplotlib绘制常见的几种图形

Python研究者

8月日更

InnoDB 表空间

SH的全栈笔记

MySQL innodb 表空间

做正确的事情,而不是把事情做正确

非著名程序员

个人成长 提升认知 认知提升 8月日更

小布助手在面向中文短文本的实体链指比赛中的实践应用

OPPO小布助手

人工智能 算法 模型训练 智能助手 短文本

量化策略APP系统开发,马丁策略交易平台

13530558032

BuildPacks 打包

Zhang

Docker image CNB OCI

手慢无!Spring+Spring Boot+Spring Cloud Alibaba全系列高级笔记限时开源!

程序员小毕

Java spring 程序员 面试 微服务

微信架构图设计&“学生管理系统”毕设架构

Imaginary

LVS 学习: netfilter 与 ipvs 无秘密

绅鱼片

Linux 负载均衡 LVS Netfilter IPVS

漫谈ABI

Ng

探索技术与应用融合的区块链 实现产业良性发展

CECBC区块链专委会

Tron波场链智能合约系统开发案例|波场链源码搭建

橙子区块链l53o56oloo3

TRONex波场智能合约 DAPP智能合约交易系统开发 波场DAPP

每天2小时,奋战31天,我凭这份PDF拿下腾讯、阿里、京东等offer

程序员改bug

Java 程序员 面试 编程语言 架构、

搭建太阳系3D可视化平台,科普宇宙的未知奥秘

一只数据鲸鱼

科普 数据可视化 智慧宇宙 太空

中国法定数字货币(DCEP)全面启航!全国普及势在必行

CECBC区块链专委会

模块五:微博评论模块高性能高可用计算架构设计

kk

架构实战营

阿里专家分享的SpringCloudNginx高并发核心文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

80W美团架构师整理分享出了Spring5企业级开发实战文档

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

手把手教你15分钟搭建人脸戴口罩识别软硬件系统

百度大脑

人工智能 EasyDL

Linux内核源码分析方法—程序员进阶必备

Linux服务器开发

操作系统 Linux内核 内核源码 底层原理 内核开发

ipfs投资者靠什么赚钱?投资ipfs要多少钱?

投资ipfs要多少钱 ipfs投资者靠什么赚钱

快手基于 Flink 构建实时数仓场景化实践

阿里云大数据AI技术

膜拜!终于拿到了美团大佬分享的Netty源码剖析与应用PDF

公众号_愿天堂没有BUG

Java 编程 程序员 架构 面试

字节三面“凉凉”了,面试题与细节回顾,Java程序员的我太难了

程序员改bug

Java 程序员 算法 编程语言

真香了!基于SpringCloud设计一个大型电商项目(附文档/视频/源码)

程序员小毕

Java 程序员 面试 分布式 微服务

ipfs矿机公司哪家好?ipfs矿机公司实力排行?

分布式存储 Filecoin ipfs挖矿 ipfs矿机 ipfs矿商排名

亚信数据库AIDB通过统信UOS认证,国产自主可控项目新选择

AISWare AIDB

国产化 国产数据库 亚信数据库AIDB

英特尔CEO帕特·基辛格:面向未来的数字化需求,推进未来计算创新、探索与颠覆

科技新消息

开源中间件技术学习路线

开源中间件技术学习路线

为什么我不再用Vue,改用React?-InfoQ