JSX：React 对前端世界的一次“反叛”🤯你以为 JSX 是在 HTML 里写 JS？不，它是 React 最“

🤯你以为 JSX 是在 HTML 里写 JS？

不，它是 React 最“叛逆”的设计，也是前端组件化的分水岭

JSX 不是语法糖那么简单，它是一种“世界观”。

很多人第一次看到 JSX，反应都很统一：

“这玩意合法吗？”
“JS 里写 HTML？这不违反祖宗之法吗？”
“我当年学前端就是为了把 JS、HTML、CSS 分开啊！”

结果没想到，React 直接来了一句：

“我全都要。”

而 JSX，就是这场“合并”的核心。

一、JSX 是什么？一句话讲清楚

官方解释往往很抽象，我们先来一句人话版定义：

JSX = 用 JavaScript 描述 UI 结构的方式

它不是模板引擎
不是新语言
不是浏览器原生支持的东西

它的本质只有一句：

JSX === React.createElement 的语法糖

来看一组对照你就懂了：

const element = <h2>JSX 是 React 中用于描述 UI 的语法拓展</h2>

等价于👇

const element = React.createElement(
  'h2',
  null,
  'JSX 是 React 中用于描述 UI 的语法拓展'
)

JSX 做的事只有一件：
👉 让你写 UI 的时候，不用手写 createElement 的地狱回调

二、React 为什么要发明 JSX？

这是一个绕不开的问题。

在 React 出现之前，前端的世界是这样的：

HTML：结构
CSS：样式
JS：逻辑

看起来很优雅，实际上很割裂。

React 的思路非常激进：

❌ 不要按“技术类型”拆文件
✅ 要按“功能单元”拆组件

于是 React 提出了一个全新的最小单位：

组件（Component）

而 JSX，就是为组件服务的。

三、JSX 背后的真正主角：组件

1️⃣ 组件不是“页面”，而是“函数”

在 React 里：

function App() {
  return <h1>Hello React</h1>
}

这不是模板
不是配置
不是魔法

它只是一个返回 JSX 的函数。

一句话概括：

返回 JSX 的函数，就是组件

为什么用函数？

因为函数天生就适合：

封装逻辑
复用代码
管理状态
接收参数（props）

React 做了一件很聪明的事：

把 UI = 函数(state)

2️⃣ 为什么组件名必须大写？

这是 JSX 的一条铁律：

<MyButton />  // 组件
<div />       // 原生标签

原因很简单：

React 通过首字母大小写，区分“你写的组件”和“HTML 标签”

否则它根本不知道该去哪找这个东西。

四、JSX = XML in JS，但不只是长得像

JSX 常被一句话概括为：

XML in JavaScript

但这句话只对了一半。

JSX 确实长得像 HTML，但它的灵魂是 JavaScript 表达式。

1️⃣ JSX 里的一切，都是 JS

<h1>Hello {name}</h1>

{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}

{todos.map(todo => (
  <li key={todo.id}>{todo.title}</li>
))}

这不是“模板语法”。

这是：

在 JS 里，直接写 JS 表达式

React 非常克制，它没有发明一套新语法，而是说：

“你用原生 JS 就够了。”

2️⃣ 为什么 JSX 里不用 `class`？

<div className="title"></div>

原因你肯定听过：

class 是 JavaScript 的关键字

JSX 不是 HTML，它最终是会被编译成 JS 的。

所以 React 选择了：

class → className
for → htmlFor

不是任性，是尊重 JS 规则。

五、JSX 不只是 UI，它是“组件树”

在 React 中，你真正构建的不是 DOM 树，而是：

组件树

<App>
  <JuejinHeader />
  <Articles />
  <Aside>
    <Checkin />
    <TopArticles />
  </Aside>
</App>

你写的 JSX，本质是在声明：

“我的页面是由哪些组件组成的”

React 再把这棵组件树，映射成真实 DOM。

这也是为什么你在 React DevTools 里看到的是：

<App />
<Header />
<List />

而不是一堆 <div>。

六、JSX + State：UI 是“活”的

来看一个经典例子：

const [name, setName] = useState("vue");

setTimeout(() => {
  setName("react");
}, 3000);

<h1>Hello {name}!</h1>

这里发生了什么？

name 是状态
JSX 使用了 name
当 name 变化
React 自动重新执行组件函数
JSX 重新计算
UI 自动更新

这就是 React 的核心公式：

UI = f(state)

JSX 是这条公式里，最直观的表达方式。

七、条件渲染 & 列表渲染：JSX 的真实威力

条件渲染

{isLoggedIn ? <div>已登录</div> : <div>未登录</div>}

没有 v-if
没有指令
只有 JS 表达式

列表渲染

<ul>
  {todos.map(todo => (
    <li key={todo.id}>{todo.title}</li>
  ))}
</ul>

React 的态度很明确：

“我不给你新语法，你用 JS 解决一切。”

这也是 React 入门门槛高的原因之一。

八、JSX 是“反传统”的，但它赢了

JSX 曾经被疯狂吐槽：

不优雅
不纯粹
不符合前端分离原则

但几年后，现实是：

Vue 3 的 JSX 用户越来越多
Solid / Preact / Astro 全部支持 JSX
前端开始以组件为中心思考 UI

JSX 背后真正成功的不是语法，而是这个理念：

“UI 不该是字符串拼接，而应该是可组合的函数结构。”

九、写在最后：JSX 改变了前端的“开发单位”

在没有 React 之前：

HTML 标签是最小单位
CSS 规则是最小单位

在 JSX + React 之后：

组件，成为了前端的基本生产单位

你不再是“写页面的人”，而是：

搭组件、组系统、拼产品的工程师

🌟一句话总结

JSX 不是把 HTML 塞进 JS

而是：
用 JavaScript，重新发明 UI 的组织方式

如果你理解了这一点，
你就真正入门 React 了。

JSX：React 对前端世界的一次“反叛”