Skip to content

为什么 React 更容易成为生态默认项

这一页不再问“谁更流行”。

我更想回答这个问题:

为什么新工具、新渲染器、新工程框架、新组件方案出现时,React 往往最先被支持?

这不是因为 React 每个技术点都更强。React 更早把 UI 编程整理成了一套容易复用的写法,JSX 又被工具链普遍接受。新工具要接现代前端 UI,先接 React 往往最划算。

这比单纯比较 API 好坏更接近问题本身。

先抓住主线

React 的优势不能只从组件函数、Hooks、Virtual DOM 或状态管理去看。

这些当然重要,但还不是最关键的部分。更值得看的,是这几件事:

  • UI 可以被写成普通 JavaScript 表达式
  • JSX 成了跨工具链最容易识别和处理的 UI 语法
  • 组件模型足够薄,方便不同运行时复用同一套心智
  • 很多生态工具默认先把 React 当目标

所以 React 后来不只是一个 Web UI 框架。很多人说 React,其实是在说一种“用 JavaScript 描述界面”的写法。

JSX 这一层很关键

JSX 本来只是 React 推广起来的语法形式,但现在它已经超出了 React 本身。

很多工具并不是因为“喜欢 React”,而是因为 JSX 接起来省事:

  • 它是 JavaScript 语法树的一部分,容易被 Babel、SWC、TypeScript、ESLint、Prettier、编译器和 IDE 处理
  • 它不需要框架专属模板解析器,通用工具链更容易接入
  • 它能和变量、函数、闭包、条件表达式、类型系统自然混在一起
  • 现成规则、插件和类型声明很多

新的 bundler、formatter、linter、编译器、测试工具出现时,先支持 JSX,基本就能覆盖一大批现代 UI 项目。

Vue 的模板体验很好,但模板是 Vue 自己的语言。外部工具要真正做好 Vue,就得理解 SFC、模板 AST、Vue 编译规则和语言服务。这套东西很完整,也确实更贵。

React 的框架友好度

React 很适合被别的框架和运行时拿去组合。

典型例子:

  • Next.js、Remix 把 React 放进应用框架
  • React Native 把 React 接到原生平台
  • Ink 用 React 写终端 UI
  • React Three Fiber 用 React 写 Three.js 场景
  • MDX 把 JSX 和 Markdown 放到一起

这批例子放在一起看,重点就出来了:

React 的强处不只是“浏览器里怎么更新 DOM”,而是它的组件表达可以迁移到很多宿主环境。

React 的运行时协议相对薄,JSX 又足够通用。上层框架、渲染器、DSL 想找一个 UI 表达层时,React 经常就是阻力最小的选择。

React 变成了一种思想

很多团队说“支持 React”,实际支持的不只是 react 这个包,而是一整套默认假设:

  • 组件就是函数
  • UI 是状态的投影
  • 数据从父到子流动
  • 事件把变化带回状态层
  • JSX 是描述界面的普通代码
  • 组合优先于模板指令扩展

这些假设不复杂,传播就快。

React 的复利也在这里。你学的不是一组 API,而是一套可以带到 Web、Native、CLI、3D、文档站和设计系统里的表达方式。

Vue 的强项在哪里

这不是说 Vue 弱。

Vue 的强项在另一侧:

  • 模板对大多数业务界面更直观
  • SFC 把模板、逻辑、样式组织成清晰边界
  • 响应式系统让很多更新逻辑更自然
  • 编译器能利用模板静态结构做优化
  • script setup、宏和 SFC 编译链能给业务开发很高的效率

Vue 更像一套完整的应用开发语言和工程体系。它把很多约定放进编译阶段,框架内体验会更顺。

React 更像一个开放的 UI 表达协议。它把很多问题留给 JavaScript、JSX 和周边生态,外部工具接入起来更轻。

差异放到一张表里

可以把两者的差异粗略理解成:

维度ReactVue
核心表达JSX + JavaScriptSFC + 模板 + 编译宏
工具友好度通用 JS/JSX 工具链天然友好需要 Vue SFC/模板专属工具链
生态扩展容易被其他框架、渲染器、平台复用框架内集成体验更完整
学习迁移学到的是一套 UI 思想和 JSX 表达学到的是 Vue 编译体系和响应式模型
优势场景跨平台、跨渲染器、工具生态默认支持高效率业务开发、模板优化、SFC 工程体验

这不是谁替代谁。两边押的地方不一样。

为什么这会影响市场

React 的市场优势大概来自这些东西叠在一起:

  1. 它更早占住了组件化与单向数据流的历史窗口。
  2. Meta 背书给企业长期维护预期。
  3. JSX 成为事实标准,降低了工具生态接入成本。
  4. 大量新框架和新平台优先围绕 React 做设计。
  5. 招聘、课程、组件库和工程模板继续强化这个选择。

这里不要落回“React 更流行所以更流行”这种循环解释。更实际的原因是:

React 的表达方式足够通用,围绕它做新东西的边际成本更低。

小结

React 的优势不只在浏览器里的更新模型。它把 UI 开发变成了一套容易迁移的写法,又通过 JSX 接上了通用工具链。

Vue 的优势是框架内体验、编译器能力和业务开发效率;React 的优势是框架友好度、生态默认位和跨宿主环境的表达迁移能力。

接着读

  1. React 与 Vue 的真实差异
  2. React createElement 与 JSX runtime
  3. Vue JSX / TSX 的本质

Released under the CC BY-NC-SA 4.0 License.