JSX 与 ES6/ES2015

Posted 2023-02-21

【中文标题】JSX 与 ES6/ES2015

【英文标题】：JSX vs ES6/ES2015

【发布时间】：2015-12-18 21:48:30

【问题描述】：

在我的项目中，我使用了 React 和 Babel，因此我使用了一些 ES6 功能，但主要是 React 使用的那些。 Webstorm 让我可以选择将我的语法标记为 ES6 或 JSX Harmony，我感到很困惑。

我想我知道什么是 ES6/ES2015 以及如何将它与编译器一起使用，例如。通天塔。

困难的部分 id JSX/JSX Harmony。我知道 React 使用“JSX”但是：

这和 here 是同一个 JSX 吗？如果不是，Webstorm 中的 JSX Harmony 选项是指哪个 JSX？

我看过提到的兼容性页面 here 并且知道 JSX Transformer 只支持 ES6 的一小部分，但显然 Babel 支持 JSX 作为对 ES6 支持的补充，所以 JSX 似乎不仅仅是 ES6 子集... 如果是这样，JSX React 或 JSX Harmony 的哪些特性不是 ES6 规范的一部分？

编辑：

至于问题 1，我敢肯定，这是两件完全不同的事情。但是什么是 JSX Harmony？

编辑 2：

为了回答我自己的问题，Webstorm JSX Harmony 很可能是指带有 --harmony 标志的 React JSX 编译器支持的语法 - 添加了一些 ES6 支持。

【问题讨论】：

React JSX 和完整的 ES6 是什么？ - 这是对 Webstorm JSX Harmony 的评论的回答，但评论消失了。

“Harmony”是 ES6 的旧名称，以防万一。

那么 JSX Harmony 会是 ES6 + React JSX，对吧？

回答我自己 - 可能不，这可能是 React JSX 扩展加上一些 ES6 转换，如这里 (facebook.github.io/react/jsx-compiler.html)。

@JeffreyYasskin: not exactly, no，尽管过去它们经常可以互换。

【参考方案1】：

不，这不是您提到的 JSX。这是this one。

JSX 是 ECMAScript 的类似 XML 的语法扩展，没有任何定义 语义。它不打算由引擎或浏览器实现。

JSX 并不打算将 ES6 功能转换为 ES5，因此，它只实现了一些最有用的功能来帮助处理模板代码。

如果你今天想使用 ES6，你必须使用Babel（首选）或Traceur 将你的代码转译为 ES5，然后你就可以使用大部分已经可用的功能。如果你想要一个更强大的转译器，它也有类型定义，你可以看看Typescript。

【讨论】：

JSX 在 pt。 2 表示开启了 --harmony (ES6) 标志的 JSX 编译器 (facebook.github.io/react/jsx-compiler.html)？这开始有意义了。

我使用过 TypeScript 并且喜欢它（从语法上讲，ActionScript3 之于 ActionScript2 的语法对于 javascript 来说是一个优势），但我决定尝试其他方法并深入研究 vanilla JS。不过，我从来没有使用过 CoffeScript——从我目前所见的情况来看，它似乎更像 Python。

【参考方案2】：

不，这不是同一个 jsx。我知道有两种叫做 JSX 的语言：

React.js 的模板语言

一种静态类型的编程语言，可编译为 javascript。

这两种语言就像 XML 和 C++ 一样不同。

您要查找的 JSX 来自这里：https://github.com/facebook/react，并且可以通过 npm 从这里安装：https://www.npmjs.com/package/react-tools

JSX 编程语言不会编译 React JSX 模板。