React中的JSX是什么？何时、为何使用？与HTML有何区别？

JSX 是什么？ #

JSX 是 React 提供的JavaScript 语法扩展，它看起来和 HTML 非常相似，但本质是一种语法糖——写出来的 JSX 代码最终会被 Babel 这类编译工具转译成标准的 JavaScript 代码（具体是React.createElement()函数调用）。

举个例子：
你写的 JSX 代码：

<h1 className="title">Hello React</h1>

会被转译成：

React.createElement('h1', { className: 'title' }, 'Hello React')

所以它并不是独立的语言，只是让你能用更直观的方式描述 React 组件的 UI 结构。

何时使用 JSX？ #

在 React 项目中，只要你需要定义组件的渲染内容，就可以用 JSX。不管是函数组件还是类组件，JSX 都是描述 UI 的默认方式。

当然你也可以完全不用 JSX，直接手写React.createElement()来构建 UI，但这种方式代码可读性极差，几乎没有开发者会这么做——除非是一些极端的动态组件生成场景。

为何要使用 JSX？ #

• 直观易读：用类似 HTML 的语法描述 UI 结构，比纯 JavaScript 代码更符合开发者的视觉习惯，一眼就能看懂页面的层级和内容。
• 无缝整合 JavaScript：可以直接在 JSX 中嵌入 JavaScript 表达式（用{}包裹），比如动态展示数据、处理条件判断，不用像传统 HTML 那样拼接字符串，避免了很多语法错误和安全问题。
• 编译时校验：JSX 在编译阶段就能发现语法错误，比如标签未闭合、属性名写错等，不用等到代码运行时才暴露问题。
• 生态兼容性：React 生态的绝大多数工具、教程、第三方组件都默认使用 JSX，用它能降低学习成本，也更方便和其他开发者协作。

JSX 与 HTML 的核心差异 #

• 属性命名规则：JSX 采用驼峰式命名，比如用className代替 HTML 的class（因为class是 JavaScript 关键字），用onClick代替 HTML 的onclick，符合 JS 的命名规范。
• 表达式嵌入：JSX 支持用{}直接嵌入任意 JavaScript 表达式（比如变量、函数调用、三元运算），而 HTML 本身不支持，必须通过 JavaScript DOM 操作来动态插入内容。
• 标签闭合要求：JSX 中所有标签必须闭合，比如<img src="..." />、<input type="text" />，而 HTML 里部分标签（如<img>、<input>）可以不闭合。
• 条件与循环渲染：JSX 可以直接结合 JavaScript 的条件语句、循环来生成动态 UI，比如：

  {isLoggedIn ? <p>欢迎回来</p> : <button>登录</button>}
  {users.map(user => <p key={user.id}>{user.name}</p>)}
  

  而 HTML 本身不支持这类逻辑，必须依赖外部 JavaScript 来操作 DOM。
• 内联样式处理：JSX 的内联样式是 JavaScript 对象，比如style={{ color: 'red', fontSize: '16px' }}，而 HTML 的内联样式是字符串style="color: red; font-size: 16px"。
• 根元素限制（旧版 React）：旧版 React 要求 JSX 必须有一个单一的根元素（比如用<div>或<>片段包裹），而 HTML 可以直接写多个同级元素（新版 React 已支持多根元素，但片段包裹仍是常见写法）。

内容的提问来源于stack exchange，提问作者Ivana