<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/bfda29.md for this page in Markdown format</div>

SX 代码是如何“摇身一变”成为DOM 的？

• JSX 的本质是什么，它和 JS 之间到底是什么关系？

• 为什么要用 JSX？不用会有什么后果？

• JSX 背后的功能模块是什么，这个功能模块都做了哪些事情？

JSX 的本质：JavaScript 的语法扩展

React 官网给出的一段定义：

JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。

JSX 语法是如何在 JavaScript 中生效的：

Babel 也具备将 JSX 语法转换为 JavaScript 代码的能力

所有的 JSX 标签都被转化成了 React.createElement 调用，这也就意味着，我们写的 JSX 其实写的就是 React.createElement，虽然它看起来有点像 HTML，但也只是“看起来像”而已。JSX 的本质是React.createElement这个 JavaScript 调用的语法糖，这也就完美地呼应上了 React 官方给出的“JSX 充分具备 JavaScript 的能力”这句话。

React 选用 JSX 语法的动机

• JSX 代码层次分明、嵌套关系清晰；

  • 而 React.createElement 代码则给人一种非常混乱的“杂糅感”，这样的代码不仅读起来不友好，写起来也费劲。

• JSX 语法糖允许前端开发者使用我们最为熟悉的类 HTML 标签语法来创建虚拟 DOM，在降低学习成本的同时，也提升了研发效率与研发体验。

JSX 是如何映射为 DOM 的：

JSX 会被编译为 React.createElement(), React.createElement() 将返回一个叫作 “React Element” 的JS对象。

生成vdom， 通过react.render 方法渲染出实际的dom