一、React的JSX和HTML有什么区别?概述1.1 什么是JSXJSX (JavaScript XML) 是一种 JavaScript 的语法扩展它允许我们在 JavaScript 代码中编写类似 HTML 的标签。React的JSX和HTML有什么区别?这是很多初学者常问的问题。简单来说JSX 看起来像 HTML但它实际上会被 Babel 编译成普通的 JavaScript 函数调用 (如 React.createElement)。1.2 为什么React选择JSXReact 认为渲染逻辑本质上与其他 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 classcontainer forinputId/div // JSX 写法 div classNamecontainer htmlForinputId/div2.2 样式编写方式的差异(style属性)HTML 中的 style 属性接收的是字符串格式的 CSS。而 JSX 中的 style 属性接收的是一个 JavaScript 对象并且 CSS 属性名需要使用驼峰命名法 (camelCase) 而不是短横线 (kebab-case)。// HTML 写法 div stylebackground-color: red; font-size: 14px;/div // JSX 写法 div style{{ backgroundColor: red, fontSize: 14px }}/div2.3 事件处理的区别(onClick vs onclick)HTML 中绑定事件使用全小写的属性 (如 onclick)并且属性值是一个字符串形式的执行代码。而在 JSX 中事件属性使用驼峰命名法 (如 onClick)并且属性值是一个函数引用。// HTML 写法 button onclickhandleClick()Click Me/button // JSX 写法 button onClick{handleClick}Click Me/button2.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 中的编译和渲染流程React.createElementReact17jsx-runtimeJSX 代码Babel 编译器转换处理JavaScript 对象/虚拟 DOMReactDOM.render真实 DOM 更新自动运行时 jsx 函数3.2 Babel如何转换JSXBabel 会读取 JSX 代码并将其转换为 React.createElement 函数调用。在 React 17 之前每个组件都需要引入 React。React 17 之后引入了全新的 jsx-runtimeBabel 会自动引入 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有什么区别?中极为重要的一条约定。
)
