一、React的JSX和HTML有什么区别?概述
1.1 什么是JSX
JSX (JavaScript XML) 是一种 JavaScript 的语法扩展，它允许我们在 JavaScript 代码中编写类似 HTML 的标签。React的JSX和HTML有什么区别?这是很多初学者常问的问题。简单来说，JSX 看起来像 HTML，但它实际上会被 Babel 编译成普通的 JavaScript 函数调用 (如 React.createElement)。
1.2 为什么React选择JSX
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，因此发明了 JSX。它将标记与逻辑共同存放在称之为 "组件" 的松散耦合单元中，使得开发者能更直观地描述 UI。
1.3 两者的本质关系
HTML 是一种标记语言，用于定义网页的结构；而 JSX 是 JavaScript 的语法糖，它最终会被编译成 JavaScript 对象 (虚拟 DOM)。React的JSX和HTML有什么区别?的根本在于：HTML 是静态的浏览器解析标签，而 JSX 是动态的 JavaScript 对象。
二、React的JSX和HTML有什么区别?核心差异解析
2.1 标签属性命名规则不同(class vs className)
在 HTML 中，我们使用 class 属性来设置样式类名。而在 JSX 中，由于 class 是 JavaScript 的保留字，必须使用 className 来代替。同理，HTML 中的 for 属性在 JSX 中需要写成 htmlFor。
// HTML 写法 <div class="container" for="inputId"></div> // JSX 写法 <div className="container" htmlFor="inputId"></div>2.2 样式编写方式的差异(style属性)
HTML 中的 style 属性接收的是字符串格式的 CSS。而 JSX 中的 style 属性接收的是一个 JavaScript 对象，并且 CSS 属性名需要使用驼峰命名法 (camelCase) 而不是短横线 (kebab-case)。
// HTML 写法 <div style="background-color: red; font-size: 14px;"></div> // JSX 写法 <div style={{ backgroundColor: 'red', fontSize: '14px' }}></div>2.3 事件处理的区别(onClick vs onclick)
HTML 中绑定事件使用全小写的属性 (如 onclick)，并且属性值是一个字符串形式的执行代码。而在 JSX 中，事件属性使用驼峰命名法 (如 onClick)，并且属性值是一个函数引用。
// HTML 写法 <button onclick="handleClick()">Click Me</button> // JSX 写法 <button onClick={handleClick}>Click Me</button>2.4 注释语法的不同
HTML 使用 <!-- 注释内容 --> 来添加注释。而在 JSX 中，由于它本质上是 JavaScript，所以需要使用 JavaScript 的注释语法 {/注释内容/}。在标签内部的注释必须包裹在大括号中。
2.5 布尔值属性与表达式支持
在 HTML 中，布尔属性的存在即为 true (如 disabled)。在 JSX 中，你可以显式地传递布尔值，并且可以使用大括号 {} 嵌入任意 JavaScript 表达式，这是 HTML 无法做到的。
// JSX 支持表达式 <div>{showMessage ? 'Hello' : 'Goodbye'}</div> <button disabled={isDisabled}>Submit</button>三、React的JSX和HTML有什么区别?底层转换机制
3.1 JSX编译流程图解
要深入理解 React的JSX和HTML有什么区别?，我们需要了解 JSX 是如何被浏览器识别的。以下是 JSX 在 React 中的编译和渲染流程：
3.2 Babel如何转换JSX
Babel 会读取 JSX 代码，并将其转换为 React.createElement 函数调用。在 React 17 之前，每个组件都需要引入 React。React 17 之后，引入了全新的 jsx-runtime，Babel 会自动引入 React 内部函数，无需在代码中显式 import React。
3.3 虚拟DOM的生成与渲染
React.createElement (或 jsx 函数) 执行后，返回的是一个普通的 JavaScript 对象，这个对象就是所谓的虚拟 DOM。React 会比较前后两次的虚拟 DOM 树，计算出最小变化，然后批量更新到真实的 HTML DOM 上。这也是 JSX 性能优于直接操作 DOM 的原因之一。
四、React的JSX和HTML有什么区别?实战避坑指南
4.1 闭合标签的严格要求
HTML 对于自闭合标签 (如 <br>, <img>) 的斜线要求很宽松，甚至可以省略。但在 JSX 中，所有标签必须显式闭合，自闭合标签必须加上斜线 <br/>，否则会报语法错误。
4.2 条件渲染与列表渲染的规范
在 HTML 中无法直接进行逻辑判断，而在 JSX 中可以通过三元运算符进行条件渲染，或者使用 map 函数进行列表渲染。需要注意的是，map 渲染列表时必须提供唯一的 key 属性，帮助 React 识别哪些元素发生了变化。
4.3 自定义组件的首字母大写约定
在 HTML 中标签名不区分大小写。但在 JSX 中，React 规定小写字母开头的标签会被渲染为原生 HTML 标签，而大写字母开头的标签会被解析为自定义 React 组件。这是 React的JSX和HTML有什么区别?中极为重要的一条约定。
