JSX(JavaScript XML)是 React 的核心语法扩展,允许开发者使用类似 HTML 的写法来描述用户界面。它本质上是 JavaScript 的语法糖,最终会被编译为 React.createElement()
调用。
JSX 的优势 ✅
- 直观性:通过标签语法更直观地描述 UI 结构
- 可读性:与 HTML 高度相似,降低学习成本
- 动态性:支持 JavaScript 表达式嵌入(如
{name}
) - 组件化:配合 React 组件实现模块化开发
基本语法示例 📌
const element = <h1>Hello, world!</h1>;
该代码等价于
React.createElement('h1', null, 'Hello, world!')
JSX 与 HTML 的区别 ⚖️
特性 | JSX | HTML |
---|---|---|
属性 | 使用驼峰命名法(如 className ) |
使用短横线命名法(如 class ) |
表达式 | 支持嵌入 JavaScript 表达式 | 不支持直接嵌入表达式 |
标签闭合 | 自闭合标签需用 / (如 <img /> ) |
无需自闭合标签 |
使用注意事项 ⚠️
- JSX 默认是严格模式,需手动开启
strictMode: true
- 避免在 JSX 中直接使用
eval()
或new Function()
- 通过
babel
或webpack
等工具进行转译
了解更多 React 基础知识 →
查看 JSX API 文档 →