携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

一、前言

在 JSX 这篇文章中我们已经介绍了什么是 JSX ，总结了其作用就是构建 React 应用的 UI 界面，同时还介绍了 JSX 的使用方法及渲染方式等等，现在我们将进一步揭秘 JSX 的原理，搞清楚 JSX 语法的转化过程到底是怎么实现的。

二、JSX 语法的转化过程

首先第一点，我们要知道 JSX 仅仅是 createElement() 方法的语法糖，所谓语法糖其实就是指简化程序的一种语法（简化语法），对开发人员比较友好的一种语法，例如如下两块代码：

const element = (
    <h1 className="greeting">
        hello world!
    </h1>
)

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

JSX语法代码就是 createElement() 代码的简化写法，不难看出使用 JSX 语法写的代码更加直观，更加容易理解且更加友好。
除此以外，这两个代码块之间还存在着一定的联系，那就是我们用 JSX 语法写的代码最终会被 @babel/preset-react 插件编译为 createElement() 方法，并且该插件在 React 脚手架中已经配置好了，不需要我们再做这一步操作。
当 JSX 语法代码被转化为 createElement() 方法后，createElement() 方法还会继续再次转化为 React 元素，而 React 元素实际上是一个对象，用来描述你希望在屏幕上看到的内容（createElement() 方法被转化为 React 元素）。

React 元素

该代码块就是 React 元素，是一个普通的 JS 对象，用来描述你希望在屏幕上看到的内容。

// 注意：这是简化过得结构
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'hello world!'
    }
}

通过运行 JSX 语法代码块，页面上效果如下：

总结 JSX 语法的转化过程分2步，JSX语法 ——> createElement() ——> React 元素。