React必读：深入了解JSX的本质

JSX 示例代码 🧑‍💻

jsx 复制代码

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1 className="title">I am the title</h1>
        <p className="content">I am the content</p>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这3个问题你有思考过🐴

JSX 的本质是什么，它和 JS 之间到底是什么关系？
为什么要用 JSX？不用又怎么样？
JSX 的背后是什么，背后都做了哪些事情？

如果以上问题在你使用 React 期间，还没有思考过并产生自己的理解的话，就继续看下去吧~

让我们开始吧💁‍♂️

大多数人只是简单地将 JSX 理解为模板语法的一种。JSX 作为 React 框架的一大特色，它其实与 React 本身的运作机制之间存在着紧密的联系。当你了解了这层"联系"，建立起强大的理论自信，在之后的面试过程中就可以和面试官侃侃而谈了。

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file.

以上是 React 官方对于 JSX 的解释，翻译过来：

JSX 是 JavaScript 的一种语法扩展，可让您在 JavaScript 文件中编写类似 HTML 的标记。

官方给 JSX 的定位是 JavaScript 的"扩展"，这直接决定了浏览器并不会像天然支持 JavaScript 一样地支持 JSX，那么 JSX 的语法是如何在 JavaScript 中生效的呢？

Babel 登场了👾

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

以上是 Babel 官方的解释，翻译过来：

Babel 是一个工具链，主要用于在当前和旧版浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容的 JavaScript 版本。

举例来说，ECMAScript 2015+ 版本推出了一种名为模板字符串的新语法，这种语法在一些低版本的浏览器中并不兼容。示例如下：

javascript 复制代码

var name = "cenyu";  
var place = "beijing";  
  
`Hello ${name}, ready for ${place}?`;

Babel 可以帮助我们将这段代码转换为大部分低版本浏览器也能够识别的代码

javascript 复制代码

var name = "cenyu";  
var place = "beijing";  
  
"Hello ".concat(name, ", ready for ").concat(place, "?");

同样的，Babel 也具有将 JSX 语法转换为 JavaScript 代码的能力。

那么 Babel 具体会将 JSX 处理成什么样子呢？如下图所示：

可以看到所有的 JSX 标签都被转换为了 React.createElement 的调用。这也就意味着，我们所写的 JSX，其实写的就是 React.createElement。

所以，虽然 JSX 看起来像 HTML，但也只是看起来像而已。

JSX 的本质是 React.createElement 这个 JavaScript 调用的"语法糖"。这也就解释了 JSX 语法为什么可以在 JavaScript 文件中生效的原因。✅

读到这里，你可能会想既然 JSX 等价于一次 React.createElement 的调用，那么 React 官方为什么不直接引导我们用 React.createElement 来创建元素呢？

我们来看一段 JSX 代码和 React.createElement 调用之间的对比，如下图所示：

显而易见的是，在实际功能效果一致的前提下，左侧的 JSX 代码层次分明，嵌套关系清晰，右侧的 React.createElement 代码则显得比较混乱，读写都相对困难。

因此，JSX "语法糖"允许咱们前端开发者，使用我们最为熟悉的类 HTML 标签语法来进行编码（创建虚拟 DOM，这一块儿我们之后再聊），在降低学习成本的同时，也提升了研发效率与体验。

最后

读到这里，相信我们对于在文章开始提出的3个问题，已经有了自己的理解。

觉得讲得还不错的话，求赞、求关注🥸。

我们之后来一起聊聊 React.createElement 到底做了什么，以及虚拟DOM的事情。

码码指南，在你我的前端路上一直互相陪伴~