在 React 中使用 JSX（JavaScript XML） 语法，主要有以下几个原因：
JSX 看起来像 HTML，但本质是 JavaScript。它让“界面长什么样”变得非常直观。
没有 JSX：
React.createElement('div', { className: 'app' },
React.createElement('h1', null, 'Hello')
)
使用 JSX：
<div className="app">
<h1>Hello</h1>
</div>
✅ 可读性更强
✅ 结构清晰，接近真实 DOM
JSX 不是 HTML，也不是字符串，它在编译后会被转成 React.createElement()。
const element = <h1>Hello</h1>;
编译后：
const element = React.createElement('h1', null, 'Hello');
✅ 可以使用变量、函数、条件、循环
✅ 拥有 JavaScript 的全部能力
{isLogin ? <User /> : <Login />}
React 的核心思想是：
UI 是状态的映射
JSX 让这种“状态 → 界面”的关系非常自然：
function App({ count }) {
return <div>Count: {count}</div>;
}
✅ 数据与界面紧密结合
✅ 逻辑和视图不分离得过于生硬
JSX 在编译阶段就会被处理：
比字符串模板更安全。
你 可以不用 JSX：
React.createElement(...)
但：
React 使用 JSX，是为了用更接近 HTML 的方式，写更强大、更安全、更直观的 JavaScript UI 代码。
如果你愿意，我也可以帮你对比：
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
