标准答案
- JSX 不是浏览器原生语法，通常会经过 Babel、SWC 或 TypeScript 编译。
- 旧 JSX transform 会把 JSX 编译成 React.createElement 调用，新 JSX transform 会编译成 jsx/jsxs 运行时函数调用。
- 小写标签如 div、span 会被当成原生 DOM 标签，编译后类型通常是字符串。
- 大写开头的名字会被当成变量引用，也就是 React 组件函数或类组件。
- JSX 表达的是 UI 结构和数据绑定，不等于 HTML 字符串；属性、事件名和 className 等写法也遵循 React 规则。
题目解析
面试里不需要背每个编译细节，但要知道 JSX 最终是 JavaScript 表达式，所以可以赋值、传参、返回和组合。
组件名必须大写的原因不是风格约定那么简单，而是编译器需要用大小写判断是原生标签还是变量组件。
理解 JSX 编译结果后，也更容易解释为什么列表需要 key、为什么组件函数返回的是 React element，而不是直接返回真实 DOM。
代码示例
下面展示 JSX 在概念上会变成元素创建调用。
TSX
function UserName({ name }: { name: string }) {
return <strong className="name">{name}</strong>
}TypeScript
// 简化理解
function UserName({ name }: { name: string }) {
return jsx('strong', {
className: 'name',
children: name
})
}常见误区
- 认为 JSX 就是 HTML，忽略 className、htmlFor、事件驼峰命名和表达式规则。
- 组件名小写，导致 React 按原生标签处理，组件逻辑不会按预期执行。
- 不知道 JSX 会编译，无法解释为什么 JSX 中可以直接嵌入 JavaScript 表达式。