跳到主要内容

jsx本质

面试速答​

  • 以下内容以 React 18 为准。
  • JSX 本质上不是模板语言，而是 JavaScript 的语法糖。
  • 它最终会被编译成 jsx / jsxs 调用，或者早期的 React.createElement 调用。
  • JSX 的产物不是 DOM，而是 React 元素对象。

核心理解​

1. JSX 到底做了什么​

这段代码：

const node = <div className="box">hello</div>

经过编译后，大致会变成：

const node = jsx('div', {
  className: 'box',
  children: 'hello',
})

也就是说 JSX 只是把“嵌套对象创建”写得更像 HTML。

2. JSX 返回的是什么​

返回的是 React 元素对象，常见字段可以粗略理解成：

{
  type: 'div',
  props: {
    className: 'box',
    children: 'hello'
  },
  key: null
}

React 再基于这些对象去构建 Fiber 树。

3. 为什么 JSX 里能写 JavaScript​

因为 JSX 不是字符串模板，而是 JavaScript 表达式的一部分，所以 {} 里本来就可以嵌入表达式。

需要说清的几个点​

1. JSX 不是字符串拼接​

它不是：

  • HTML 片段
  • 模板引擎字符串
  • 浏览器直接认识的语法

必须经过编译。

2. 组件标签和原生标签的区别​

<div />
<UserCard />
  • 小写开头通常表示原生标签
  • 大写开头通常表示变量/组件引用

这是编译阶段判断的。

3. JSX 里的属性不完全等于 HTML 属性​

比如：

  • class 写成 className
  • for 写成 htmlFor
  • 事件写成驼峰，如 onClick

因为它最终对应的是对象属性，而不是原始 HTML 文本。

典型题标准答法​

问：JSX 本质是什么？​

答：本质是 JavaScript 语法糖，编译后会变成 React 元素创建调用。它解决的是“UI 树难写”的问题，不是浏览器原生语法。

问：为什么 React 可以不写 JSX？​

答：因为 JSX 只是更友好的写法，本质上你直接调用元素创建函数也能工作。

易错点​

  • 把 JSX 当成 HTML。
  • 以为 JSX 会直接生成真实 DOM。
  • 不知道组件名为什么必须大写。

速记要点​

  • JSX = 语法糖，不是模板字符串。
  • JSX 先变 React 元素对象，再进入 Fiber/渲染流程。
  • 没有 JSX，React 也能工作。