揭开JSX面纱 ： jsx代码是如何一步步解析变成最后的html元素的

揭开JSX面纱 ： jsx代码是如何一步步解析变成最后的html元素的?

一、JSX 简介

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，允许在 JavaScript 代码中直接编写类似 HTML 的标签。虽然它看起来像 HTML，但浏览器无法直接理解和执行 JSX。因此，JSX 需要经过编译转换成标准的 JavaScript 代码，然后由 React 库处理生成最终的 DOM 元素。

二、JSX 转换为 JavaScript

1. 使用 Babel 进行编译

在开发过程中，通常使用 Babel 这样的编译器将 JSX 转换为标准的 JavaScript 代码。React 提供了新的 JSX 转换方式（自 React 17 起引入），这使得不需要显式地导入 React 来使用 JSX。

旧的转换方式（React.createElement）：

const element = <h1 className="greeting">Hello, world!</h1>;

编译后的 JavaScript 代码：

const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);

新的自动转换方式：

import { jsx as _jsx } from "react/jsx-runtime";

const element = _jsx("h1", { className: "greeting", children: "Hello, world!" });

说明：

旧的方式 使用 React.createElement 来创建 React 元素。
新的方式 使用 react/jsx-runtime 中的 jsx 函数，使得不需要手动导入 React。

编译后的 JavaScript 代码生成的是 React 元素。React 元素是描述 UI 的轻量对象，是不可变的，包含了类型、属性和子元素的信息。

React 元素结构示例：

{
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

示例流程图：

JSX代码
    ↓
Babel编译
    ↓
React.createElement / jsx 函数
    ↓
React元素
    ↓
虚拟DOM树
    ↓
Fiber架构
    ↓
真实DOM更新

JSX语法的代码会通过Babel工具编译成一个名为 React.createElement() 函数调用，并且返回一个ReactElement对象，那么这个对象有什么用呢，它又是如何渲染到我们的页面？

Babel 官网 ：https://www.babeljs.cn/

整个过程简述：

首先，JSX本质其实是javascript的语法扩展，和模板语言非常接近，但是其充分具备javascript的能力。但是其要在javascript生效的话，需使用到 Babel 进行编译，编译成成React.ccreateElement(…)

然后，createElement函数对于key和ref等特殊的props进行处理，并获取defaultProps对默认的props进行赋值，并且对传入的子节点进行处理，最终构成一个虚拟DOM对象。

最后，ReactDOM.render将生成好的虚拟DOM渲染到指定的容器上，其中采用了批处理，事务等机制并且对特定的浏览器进行了性能优化，最终转换为真实DOM