Jsx

JSX 解决了什么问题 在 JSX 出现之前，用 JavaScript 描述 UI 结构需要这样写： const el = React.createElement( 'div', { className: 'card' }, React.createElement('h2', null, title), React.createElement('p', null, content), React.createElement('button', { onClick: handleClick }, '确认') ); 嵌套稍深就几乎无法阅读。而人类天然擅长读 HTML 这种树形标签结构。 JSX 解决的核心问题是：让 UI 结构可视化，让开发者用熟悉的标签思维描述界面，同时保留 JavaScript 的全部表达能力。 // JSX 版本，结构一目了然 const el = ( <div className="card"> <h2>{title}</h2> <p>{content}</p> <button onClick={handleClick}>确认</button> </div> ); JSX 是什么 JSX（JavaScript XML）是一种 JavaScript 的语法扩展，允许在 JS 代码里直接写类似 HTML 的标签。 它既不是真正的 HTML，也不是模板引擎，而是 React.createElement() 的语法糖。浏览器不认识 JSX，需要由 Babel 等编译工具在构建阶段将其转换为普通 JavaScript。 // 你写的 JSX const element = <h1 className="title">Hello, {name}</h1>; // Babel 编译后（React 17 之前） const element = React.createElement( 'h1', { className: 'title' }, 'Hello, ', name ); // Babel 编译后（React 17+ 新 JSX Transform） import { jsx as _jsx } from 'react/jsx-runtime'; const element = _jsx('h1', { className: 'title', children: ['Hello, ', name] }); React 17 之后引入了新的 JSX Transform，编译器自动引入 react/jsx-runtime，不再需要在每个文件顶部写 import React from 'react'。 ...