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。它长这样：

{
  type: 'button',
  props: {
    onClick: handleClick,
    children: '点我'
  },
  key: null,
  ref: null
}

这个对象，就是 React 用来描述 UI 的“图纸”。React 会根据这个图纸，去构建真正的 DOM 结构。所以 ReactElement 是一个“图纸”对象， 出岔子。 它不直接操作 DOM，而是告诉 React：我想要一个按钮，它要能点，点完要施行 handleClick。

JSX 编译的两种方式

深得我心。 在 React 17 之前，JSX 会被编译成 React.createElement 的调用。比如：

React.createElement;

从 React 17 开始，JSX 的编译方式变了。现在 它会调用 jsx 函数，比如：

_jsx("h1", {
  children: "Hello, world!"
});

这个 _jsx 是 React 17+ 的新运行时带来的变化。它不再需要你手动引入 React而是由 Babel 自动引入 react/jsx-runtime 中的函数。

ReactElement 与 Fiber：一个讲结构， 一个讲施行

ReactElement 是“图纸”，Fiber 是“施工队”。ReactEle 观感极佳。 ment 告诉 React 要渲染什么Fiber 告诉 React 怎么去渲染。

ReactElement 是一个“纯对象”，它不施行任何操作，只是描述。Fiber 是一个“施行者”， 它会根据 ReactElement 的描述，去操作 DOM，去更新状态，去调度任务，坦白讲...。

React 19 的新变化

这东西... React 19 带来了很多新特性， 比如自动批处理、新的 Hooks、更好的并发控制。但它的核心，依然是那个“图纸”对象：ReactElement。

ReactElement 是一个“纯对象”，它不包含任何方法，只是一段数据结构。它就像一个“图纸”，告诉 React：我想要一个这样的结构，它要长这样，有这些属性，这些子元素。

比如：

const element = {
  type: "div",
  props: {
    children: "Hello, world!"
  }
};

这个对象，就是 ReactElement。它不施行任何操作，只是描述。React 会根据这个“图纸”去构建真正的 UI。

ReactElement 的结构

ReactElement 是一个 JavaScript 对象， 它有以下字段：

• type元素类型，比如 divh1button 等；
• props元素的属性，比如 classNameonClickchildren 等；
• key用于优化更新性能的 key；
• ref用于获取 DOM 节点的引用；

const element = {
  type: 'div',
  key: 'myDiv',
  ref: null,
  props: {
    children: 'Hello, world!',
    className: 'container'
  }
};

JSX 的编译流程

JSX 本身不会被浏览器直接识别；它必须先被编译成普通函数调用。比如：

const element = ;

const element = React.createElement;

JSX 编译的两种运行时

React.createElement;

_jsx("h1", {
  children: "Hello, world!"
});

React 的编译与运行

我们已经知道，JSX 本身不会被浏览器直接识别；它必须先被编译成普通函数调用。这个过程，就是 React 的“编译”，是不是？。

const element = ;

const element = React.createElement;

拯救一下。 所以JSX 编译后生成的，是一个 JavaScript 对象。这个对象，就是 ReactElement。

ReactElement 是一个 JavaScript 对象，它描述了 UI 的结构。它不施行任何操作，只是描述。React 会根据这个“图纸”去构建真正的 UI，很棒。。

const element = (
  

  
);

const element = React.createElement("div", { className: "container" }, 
  React.createElement);