为什么 React 比 Vue 难?你不知道的前端简史!

21,003 阅读7分钟

给前端以福利,给编程以复利。大家好,我是大家的林语冰。

00. 论文背景

wall.png

社区里有女粉问我,为什么都在说 React 比 Vue 难?

事实上,我不知道这个说法算是客观事实呢,还是“思想钢印”。

“React 比 Vue 难”的说法可能源于后端攻城狮的用户反馈,因为传统后端编程语言经典的面向对象编程 vs React Hook 的函数式编程大相径庭。

此外,前端程序猿或多或少同意该说法,这又是为什么呢?

我确信这背后一定有更深层次的原因,为此我翻云覆雨、彻夜难眠,索性重温了几部纪录片,考古了几份历史材料,终于睡着了......

01. 前 React 时代

在“前 React 时代”,前后端分离并非主流,当时 AngularJS 1 人气最高、独领风骚。

彼时还没有 TS,微软为了研发 VS Code 的原型,VS Code 团队被迫孵化了 TS。比较不为人知的是,TS 其实就是微软的第一个开源项目,可谓出道即巅峰。

ts.png

TS 横空出世后,AngularJS 团队和 TS 团队在前端生态的自然选择中牵手成功,互利共生。

React 之所以找到了“流量密码”,一来是 Facebook 大厂背书和资本注入,二来是 AngularJS 2 想要在应用层,而不只是源码拥抱静态类型,以满足谷歌大型项目的开发需求。

结果,部分前端程序猿像我一样学不会“类型体操”,AngularJS 的拥趸和 AngularJS 2 和平分手,“切换赛道”到了 React 生态。

当时关于 AngularJS 2 还有一个冷笑话,AngularJS 2 最终版发布!这确实是 AngularJS 的最终版,因为 TS 劝退了只懂 JS 的 Angular 用户......

React 起初只是 Facebook 内部一个非开源项目,虽然 React 源码也使用了另一套静态类型方案 Flow,但 React 的应用层并没有像 AngularJS 那样,期望用户全面拥抱静态类型。

彼时“Vue 之父”尤大还在谷歌实验室当打工仔,觉得一来 AngularJS 太过前卫,二来 React 没有真正提高前端人的生活质量,当时市面上主流的前端框架都美中不足。

vue.png

于是乎,凭借“用户至上”的设计哲学和“用爱发电”的开源精神,尤大自主研发了一个框架 Seed.js,这就是 Vue 的原型。

世界上最困难的事情,除了脱单,就是取名字。尤大第一次提交代码时,发现 Seed 的名字在 npm 上已经被注册占用了,所以被迫将 Seed 重命名为 View。

尤大不懂 Vue,直接命名为 View 又很直接,所以遇事不决谷歌翻译,最终使用了 View 的法语:Vue

当时 Vue 只是由一位谷歌打工仔兼开源爱好者凭借一己之力孵化出来,既没有科技大厂背书,也没有研发团队的技术支持,更没有开源基金的资本注入。

02. 后 React 时代

tay.png

比较意外的是,“前端框架大战”的导火索不是来自前端社区,而是来自 PHP 社区。

PHP 社区的大佬,“Laravel 之父”泰勒在勇闯 React 新手村的时候一脸懵逼。

这可能因为后端编程语言普遍拥抱面向对象编程,虽然 React 早期支持类式组件的写法,但 React 16 之后提出的 React Hook 则拥抱函数式编程,比较反直觉。

其次,Vue 的 SFC(单文件组件)和 React 的 JSX 都涉嫌违背“关注点分离”的开发原则。

对此,Vue 官网也补充了“免责声明”:

04-vue.png

传统前端开发中,HTML + CSS + JS 分而治之,结构、样式和逻辑隔离在不同的文件中维护,这是一种“关注点分离”的最佳实践。

而 Vue 的 SFC 和 React 的 JSX 却将这三者一股脑都塞到各自 DSL(领域驱动语言)的单一文件中。

关于 Vue 的 SFC(单文件组件),其中涉及了 Vue 模板的编译原理,以及通过响应式原理实现数据驱动视图。

在“关注点分离”的问题上,JSX 更加偏激,因为 JSX 的设计哲学是“万物皆可 JS”。

ui.png

React 社区甚至使用了诸如 styled-components 等 CSS-in-JS 方案,继续颠覆传统前端开发的认知。

历史总是惊人地相似,JS 爱好者不懂 TS 被迫离开 Angular 生态,后端攻城狮不懂 JSX 被迫离开 React 生态。

为了防止沉没成本,“Laravel 之父”及时止损,像苹果放弃十年造车、转战 AI 一样及时,直接切换赛道到 Vue。

彼时 Vue 的选项式 API 趋近类式风格,SFC 的“关注点分离”也不向 JSX 那么极端,PHP 大佬用得得心应手,直呼绝绝子,就在朋友圈给 Vue 点赞。

从此,PHP 社区开始关注 Vue。后来尤大也受邀到 PHP 大会演讲,这就是 Vue 早期的主力用户,Vue 正式出道。

因此,所谓“React 比 Vue 难”的说法,对于后端攻城狮而言,从面型对象编程切换到函数式编程、从 HTML + CSS + JS 切换到“万物皆可 JSX”的过程中,需要克服技术上范式转变和路径依赖的阻力。

对于前端程序猿而言,React 在泛函编程和关注点分离的道路上,走得比 Vue 更快、更远。

03. 前端开发现状

抛开前端简史不谈,如今 React 之难,更多体现为其生态复杂性。

Vue 生态目前有且仅有一个状态管理插件和一个人气爆棚的元框架;反观 React 生态,状态管理神仙打架,元框架也分庭抗礼。

state.png

举个栗子,我们初学 Vue,只需要学一个 Pinia,就能同时兼容 Vue 2 + Vue 3 的状态管理。

但如果我们学习 React,就需要学习 Redux,然后就会发现 Redux 用得头大,因为我们需要的其实是 React Redux。

而当你掌握了 React Redux,就会再次发现,其他 React 状态管理库好像更香,包括但不限于:

  • Mobx
  • Recoil
  • Jotai
  • Zustand
  • Valtio
  • ......

随着我们深度学习 React 生态,又双叒叕会发现,“Redux 之父”在推广 Mobx,而不是自家的 Redux;“Zustand 之父”既是“Zustand 之父”,又是“Jotai 之父”,还是“valtio 之父”......

元框架方面,Next 14 的服务端操作众口嚣嚣,有人质疑前后端不分离是在“飚历史倒车”,有人反驳此乃全栈攻城狮的“文艺复兴”;React 最新 RSC 范式又分裂出了服务器组件和客户端组件。

不幸的是,更多的选择不仅意味着更丰富的生态系统,也意味着更高的学习成本。React 初学者很容易因为选择困难而决策瘫痪,直呼学不动了!

另一个误区是,如果你读过 React 的官方文档,就会发现,React 其实并不是框架,只是一个工具库

事实上,React 团队一直在尝试向用户解释 React 并不是框架,而是元框架的一个基建库。

07-lib-vmake.png

库少做的事情,就需要转嫁成本给用户,要求用户自己来实现,比如显式传递依赖、自己实现响应式等。这也是 React 生态更加丰富的原因之一。

此外,React Native 也在移动端占有一席之地,涉及知识面更广,对开发者的要求自然更高。

04. 高潮总结

博古通今,考虑前端简史到开发现状,所谓“React 比 Vue 难”的说法,存在若干原因,仅供粉丝参考:

  • 习惯面向对象编程的后端攻城狮不习惯前端函数式编程
  • 习惯关注点分离的前端程序猿不习惯关注点不分离
  • 选择更多的社区生态导致初学者选择困难
  • 库转嫁成本给用户,要像框架一样使用库

参考文献

  1. Vuegithub.com/vuejs
  2. Reactgithub.com/facebook/re…
  3. Angulargithub.com/angular

粉丝互动

本期话题是:你觉得 React 和 Vue 谁比较难,为什么?你可以在本文下方自由言论,文明科普。

欢迎持续关注“前端俱乐部”,给前端以福利,给编程以复利。

坚持阅读的小伙伴可以给自己点赞!谢谢大家的点赞,掰掰~

26-cat.gif