为什么要使用 JSX

原因

JSX允许将HTML类似的模板与JavaScript逻辑结合, 使组件的结构更清晰

JSX本质上是JavaScript的语法糖, 是React为提升开发体验和代码可维护性设计的一种语法扩展, 让编写组件更直观、更高效

注意

JSX需要通过构建工具(如Babel)编译为标准JavaScript
JSX不是必须的, 但它是React生态的推荐实践

创建虚拟 DOM 示例

使用JSX创建: 类型HTML模板结构, 模板与逻辑分离, 直观清晰, 便于维护

jsx

// 1. 创建虚拟 DOM
const VDOM = (
  <h1 id="title">
    <span>Halo React</span>
  </h1>
);

// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("app"));

使用JS创建: 冗长、难以维护

jsx

// 1. 创建虚拟 DOM
const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', {}, 'Hello React'))
// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("app"));