React 19 JSX编译后生成什么对象？

在我们深入探讨 React 19 中 JSX 编译后生成什么对象之前，先来聊点“人话”——你有没有过这样的经历？看着那些花里胡哨的 UI 框架，心里却总在想：这玩意儿到底是个啥？

从 JSX 到 JavaScript 对象：React 的“翻译”过程

我们先从一个最简单的例子开始。你写了一段 JSX：

const element = ;

层次低了。 看起来就像 HTML，但它不是 HTML。它是一种 JavaScript 的语法 ，是 React 的一种表达 UI 的方式。当你运行这段代码时它其实被“翻译”成了一个 JavaScript 对象。这个对象，就是我们今天要聊的主角：ReactElement。

ReactElement：JSX 的“灵魂”

ReactElement 是什么？它不是 DOM，也不是 HTML，它是一个 JavaScript 对象，用来描述 UI 的结构。它就像一个“蓝图”，告诉 React：嘿，我想要一个这样的结构，长这样，有这些属性，这些子元素，提到这个...。

比如 你写了一个按钮：

const element = 点我;

在编译后它会变成：

const element = React.createElement;

这个对象，就是 ReactElement。