[React 基础系列] 什么是 JSX，以及如何使用 JSX
最新回答
山河霜白
2026-05-27 00:50:38
JSX 是 React 团队提供的 JavaScript 语法扩展，它与 HTML 类似，但不是 HTML，未经 babel 编译直接使用 JSX 会导致大量语法错误。JSX 最简单的写法如下，渲染效果如下。
JSX 可以嵌入变量，具体用法如下，效果如下。使用 JSX 语法糖在开发中较为推荐，因为相比原始 JavaScript，其逻辑清晰、代码量更少。在实际开发中，JSX 编写代码的可读性和实现性高于原始 JavaScript。以下为 JSX 和原始 JavaScript 的实现对比。
对比原生的 JavaScript 与使用 JSX 的实现，可以发现使用 JSX 编写代码逻辑更为清晰，代码量更少。这得益于前端项目在进入生产环境前的编译过程，推荐使用 JSX 进行开发。
JSX 使用表达式非常强大，可以从嵌入表达式到在 JSX 中使用函数和作为表达式，到以三元表达返回 JSX，再到与对象结合。使用 JSX 与对象结合，本质上是将 JSX 转化为对象，其动态性来源于此。JSX 的属性可以分为原生 HTML 属性和自定义属性，通过 props 在子组件中获取实现父子组件的通信。
JSX 的嵌套形成了父子组件，如 h1 为父组件，img 和 span 为子组件。在编写 React 代码时，建议使用传统 JavaScript 的驼峰命名法，以防止关键字冲突。JSX 可以避免 XSS 攻击，因为它会将所有输入的信息转译为字符串，再渲染到页面上，有效防止注入攻击。
热门标签
