Hyper – Outperform React on every metric
Introducing Hyper：在所有指标上超越 React
Home Docs Blog Vision Introducing Hyper Crush React on every metric › Slack 8.4k 
Back May 6, 2025
Introducing Hyper — 在所有指标上超越 React (开发者预览版)
Tero Piirainen @tipiirai
今天我发布了 Hyper：一种用于构建用户界面的简单标记语言。它使开发者（和 AI 模型）能够以惊人的简洁语法生成复杂的 UI。它的目标是使前端开发变得愉快。
对比：React vs Hyper
背景故事
Hyper 是 Nue 的新响应式库，最终将取代当前的 Nue JS 包。这个库的唯一目的是拥抱简单和极简主义。它反对当前前端生态系统中普遍存在的复杂性和臃肿。这在现代 React 组件中尤其明显，在这些组件中，逻辑、结构和样式都混合在一起。然而，Hyper 正是 React 1.0 最初设想的样子：只是一个专注于渲染的 无头视图层，与样式问题明确分离。
让我们研究一下区别。
阶段 1：简单组件
我们从基础开始：如何定义基本的 UI 元素。下面是一个简单的 <table> 组件的三种定义方式：
Modern React 
Old school React 
Hyper
- Modern React: ShadCN
<Table>组件和 TypeScript。额外的样板代码来自 React 模式和自定义<Table>语法。Source • Demo - Old school React: JSX 与解耦的 CSS。更直接的标记，但仍然需要 JavaScript 连接和 JSX 转换。Source • Demo
- Hyper: 干净、符合标准的 HTML。表格就是
<table>。Source • Demo
虽然这些差异可能看起来很小，但当我们转向更复杂的组件时，它们会变得显而易见：
阶段 2：复杂组件
接下来，我们研究这些方法如何处理不断增加的复杂性。这是同一个表格组件，但现在具有排序和过滤功能：
Modern React 
Vanilla TSX 
Hyper
Modern React (Source • Demo) 使用来自 Tanstack Table 的特性扩展了 ShadCN 表格。Hyper (Source • Demo) 之间的差异变得显而易见：
- 过多的样板代码： 通过 Radix UI, Tanstack Table, 和 TypeScript 接口。这导致大约 170 行代码，而 Hyper 中为 40 行。代码和认知负荷增加了 75%。
- 抽象层： 在 160MB 的 Vite 堆栈中有六层抽象：React, ShadCN, Radix, Tanstack, TypeScript, 和 Tailwind。捆绑的 JavaScript 为 91.3KB，Hyper 以 3.9KB 提供相同的功能（1.2KB + 2.7KB 用于 hyper.js）。
- 多个转译器： ShadCN 表格需要六个不同的转译器：ESBuild, JSX Transform, Rollup, TypeScript, Tailwind, 和 PostCSS。像 Claude 和 ChatGPT 这样的 AI 模型无法为此大型依赖树生成预览。Hyper 在浏览器中运行，无需编译，或者为生产版本进行单步编译。
阶段 3：可复用组件
这是一个使用 Hyper 组装的简单仪表板：
现在，具有 "Ramsian" 外观的相同仪表板：
这种转换不需要对组件代码进行任何更改。只需要一个 30 行的 CSS 文件 扩展了基本设计系统。
使用现代 React 无法进行设计系统切换。让我们看看为什么：
React 中的问题：硬编码设计
现代 React 组件无法在具有不同设计要求的项目中重用，因为设计已硬编码在组件中。即使是微不足道的排版更改（h2 和 p）也需要编辑多个文件。在 ShadCN 中，您需要修改 alert-dialog.tsx, alert.tsx, card.tsx, dialog.tsx, drawer.tsx, 和 sheet.tsx。每个文件都需要理解几个 React 习语 (data-slot, {...props}), 实用函数 (cn(), clsx(), twMerge()), 和像 <AlertDialogPrimitive.Title> 和 <DrawerPrimitive.Description> 这样的原语，直到这些结构最终映射到 CSS。这是 ShadCN .tsx 文件中的标题和描述元素：
这种硬编码会产生可扩展性问题。例如，ShadCN 的 "New York" 主题复制了他们的默认主题，导致 40,000 多行 额外的 TSX 代码。这是一个可以通过 CSS 继承和级联轻松解决的问题。
Hyper 的解决方案：解耦设计
相比之下，Hyper 将您的排版问题集中到一个 CSS 文件中，作为 h2 和 p 元素样式的单一来源：
```
// typography.css
@layer globals {
h2 {
font-size: 1.125em_;_
font-weight: 500_;_
}
p {
color: var(--base-500)__;
text-wrap: balance_;_
line-height: 1.5_;_
}
// all typography rules "colocated" here
}
这解决了现代 React 中的三个主要问题：
1. **可复用的组件** 跨项目和上下文
2. **中心设计系统** 易于从同一位置维护
3. **零样板代码** 由于严格的分离关注点
Nue 实际上 _强制_ 您构建简单、可重用的组件。任何形式的紧耦合：CSS-in-JS、类名滥用、特定于组件的 `<style>` 元素、内联 `style` 属性或像 `dark:bg-lime-400/10 size-[max(100%,2.75rem)]` 这样的神秘实用程序类 — 都会被系统地消除。
这些简单的单元是真正可扩展应用程序的秘诀：
## [](https://nuejs.org/blog/introducing-hyper/<#scalability> "Phase 4: Scalability")阶段 4：可扩展性
这是简单性如何扩展：一个比单个 React 按钮更轻的全尺寸 [app](https://nuejs.org/blog/introducing-hyper/</mpa.nuejs.org/app/>)：
Hyper 建立了一种完全不同的范例，以简单性为中心：
### [](https://nuejs.org/blog/introducing-hyper/<#note> "Note")注意
上面的应用程序仍然使用 Nue JS 编写，但当转换为 Hyper 时，该应用程序变得更小，并且几乎没有样板代码。
## [](https://nuejs.org/blog/introducing-hyper/<#get-started-with-hyper> "Get started with Hyper")开始使用 Hyper
首先，安装 [Bun](https://nuejs.org/blog/introducing-hyper/</bun.sh>):
 ```
# Install Bun
curl _-_fsSL **https**_:__/__/_bun_._sh_/_install _|_ bash
Hyper 使用 Bun 是因为其卓越的 Web 标准支持、内置的 JavaScript 打包器、压缩器和强大的性能。在我们的 FAQ 中查看有关我们为什么更喜欢 Bun 而不是 Node 的详细信息。
安装 Hyper
```
Install Hyper
bun install nue_-_hyper
#### [](https://nuejs.org/blog/introducing-hyper/<#learn-hyper> "Learn Hyper")学习 Hyper
从 [Hyper 文档](https://nuejs.org/blog/introducing-hyper/</hyper/>) 中查看示例、API 文档和语言语法
## [](https://nuejs.org/blog/introducing-hyper/<#faq> "FAQ")常见问题解答
### [](https://nuejs.org/blog/introducing-hyper/<#what-is-nue> "What is Nue?")什么是 Nue？
Nue 是 "框架"（可以理解为 Next.js + Astro，但更简单），而 Hyper 是 "语言"（可以理解为 React，但更简单）。两者都在同一个 [monorepo](https://nuejs.org/blog/introducing-hyper/<https:/github.com/nuejs/nue/tree/master/packages/>) 下开发。以下是产品层次结构最终的样子：
Hyperlink 是即将推出的路由解决方案。盾牌图标代表与 Web 标准的紧密连接
### [](https://nuejs.org/blog/introducing-hyper/<#whats-next-in-line> "What's next in line?")下一步是什么？
我们分两个阶段让每个人，包括后端开发人员、初学者和 AI 模型，都可以更轻松地访问 Hyper：
#### [](https://nuejs.org/blog/introducing-hyper/<#full-stack-applications> "Full-stack applications")全栈应用程序
演示 Hyper 和 Nue 的功能：
* 直观的路由和导航系统
* 简单的跨组件通信
* 后端服务器和数据库集成
* 三个可切换的设计系统
* 部署到云端（运行时无关）
预计时间：3 个月。
#### [](https://nuejs.org/blog/introducing-hyper/<#generative-uis> "Generative UIs")生成式 UI
一种让您和 AI 以最小的努力生成 UI 的方法：
* 基本的 HTML 和 CSS 构建块
* 更高级别的组合
* 内置的可访问性和响应性
* 自文档化的 API 和模式
* 基本设计系统（无头，仅网格）
预计时间：4-5 个月。
### [](https://nuejs.org/blog/introducing-hyper/<#isnt-this-just-another-framewor> "Isn't this just another framework?")这不只是另一个框架吗？
Hyper 与这个问题所暗示的恰恰相反。它抛弃了数百个框架/工具/语言/习语/库/实践，这些都试图解决他们在 React 习惯用法堆栈中引入的问题。Hyper 将您置于一个全新的轨道上，在这个轨道上，对无休止的框架的需求（以及这个问题本身）变得过时。答案是：简单性具有可扩展性。少即是多。KISS。
### [](https://nuejs.org/blog/introducing-hyper/<#why-are-standards-so-important> "Why are standards so important?")为什么标准如此重要？
标准提供两个宝贵的优势：
1. 您将学习到可以持续一生的技能
2. 您的产品将永远存在
想想所有不再 "热门" 并且最终会变成技术债务的 React 特定技术。类组件、高阶组件、createClass。Redux/Context/Zustand/Jotai、Webpack、Styled Components/Emotion、Material UI/Chakra... 保持您的技能和产品新鲜是一个永无止境的循环。
标准是永恒的。
### [](https://nuejs.org/blog/introducing-hyper/<#what-do-you-mean-by-generative> "What do you mean by generative?")你所说的 "生成式" 是什么意思？
一旦 Hyper 和核心 UI 原语准备就绪，生成式 HTML 组装的概念就会揭晓。之后，您和 AI 模型都可以使用简单、最少的语法快速生成用户界面。没有不必要的垃圾会妨碍您。
### [](https://nuejs.org/blog/introducing-hyper/<#can-hyper-actually-challenge-the> "Can Hyper actually challenge the status quo?")Hyper 真的能挑战现状吗？
当然可以。要成功，我们需要解决两件事：
1. **开发者认知**：前端开发人员认为抽象层是必不可少的。随着 Hyper 演示如何在没有抽象层的情况下生成专业的 UI，这种认知将会转变。
2. **完成产品**：几个关键部分仍在开发中，特别是生成方法和设计系统。
但是一旦解决了这些挑战，Hyper 就会变得势不可挡。
### [](https://nuejs.org/blog/introducing-hyper/<#isnt-the-name-already-in-use> "Isn't the name already in use?")这个名字不是已经在使用了吗？
是的，"Hyper" 是一个 Rust HTTP 库、一个 Electron 终端模拟器，现在是一种基于 HTML 的语言语法。每个都在不同的上下文中发挥独特的作用。
### [](https://nuejs.org/blog/introducing-hyper/<#can-i-contribute> "Can I contribute?")我可以贡献吗？
是的。特别是那些不干扰核心架构的想法。如果您有 20 多年的 CSS 经验，并且没有在 React 上浪费时间，我特别希望与您联系！
### [](https://nuejs.org/blog/introducing-hyper/<#can-i-give-feedback> "Can I give feedback?")我可以提供反馈吗？
当然！加入我们的邮件列表，以便在 Hyper 正式发布时收到通知。加入后，您可以提供反馈。
## 最终目标
我们的最终目标是构建一个极其简单的堆栈。我们正在分三个主要步骤进行：
[  ](https://nuejs.org/blog/introducing-hyper/</vision/>)
加入邮件列表，关注我们的进展，并了解我们的 [vision](https://nuejs.org/blog/introducing-hyper/</vision/>) 如何展开：
[Why Nue](https://nuejs.org/blog/introducing-hyper/</docs/>) [FAQ](https://nuejs.org/blog/introducing-hyper/</docs/faq.html>) [Blog](https://nuejs.org/blog/introducing-hyper/</blog/>) [Vision](https://nuejs.org/blog/introducing-hyper/</vision/>)  [Home](https://nuejs.org/blog/introducing-hyper/</>) [Docs](https://nuejs.org/blog/introducing-hyper/</docs/>) [Blog](https://nuejs.org/blog/introducing-hyper/</blog/>) [Vision](https://nuejs.org/blog/introducing-hyper/</vision/>) [GitHub](https://nuejs.org/blog/introducing-hyper/</github.com/nuejs/nue>)