?u/JSX 是 ECMAScript 的一种类似 XML 的语法扩展，没有任何定义的语义。它不打算由引擎或浏览器实现。它不是将 JSX 纳入 ECMAScript 规范本身的提案。 它旨在被各种预处理器（转换器）使用，以将这些令牌转换为标准 ECMAScript。
// Using JSX to express UI components
var dropdown =
<Dropdown>
A dropdown list
<Menu>
<MenuItem>Do Something</MenuItem>
<MenuItem>Do Something Fun!</MenuItem>
<MenuItem>Do Something Else</MenuItem>
</Menu>
</Dropdown>;
render(dropdown);本规范的目的是定义一种简洁而熟悉的语法，用于定义具有属性的树结构。一种通用但定义良好的语法使独立的解析器和语法高亮器社区能够符合单一规范。
在现有语言中嵌入新语法是一项冒险的尝试。其他语法实现者或现有语言可能会引入另一个不兼容的语法扩展。
通过一个独立的规范，我们使其他语法扩展的实现者在设计自己的语法时更容易考虑 JSX。 这有望使各种新的语法扩展能够共存。
我们的目的是声明最少的语法空间，同时保持语法的简洁和熟悉。 这样，我们就为其他扩展打开了大门。
本规范不尝试遵守任何 XML 或 HTML 规范。 JSX 被设计为 ECMAScript 功能，与 XML 的相似之处仅是为了熟悉。
JSX 扩展了
历史上，字符串字符在\
这里的语法遵循 HTML 现行标准。
这意味着自 HTML5 以来，此列表后来扩展到 2231 个命名字符引用 被有意地从支持中排除。
可以在这里找到 HTML4 标准中定义的 252 个字符实体引用列表。
实现可以将
满足扩展语义的确切方法是实现定义的。
ECMAScript 第 6 版 (ECMA-262) 引入了模板字面量，旨在用于在 ECMAScript 中嵌入 DSL。 为什么不直接使用它，而是发明一种不属于 ECMAScript 的语法？
模板字面量非常适合用于长时间嵌入的 DSL。 不幸的是，当您在范围内使用标识符进出嵌入的任意 ECMAScript 表达式时，语法噪音非常大。
// Template Literals
var box = jsx`
<${Box}>
${
shouldShowAnswer(user) ?
jsx`<${Answer} value=${false}>no</${Answer}>` :
jsx`
<${Box.Comment}>
Text Content
</${Box.Comment}>
`
}
</${Box}>
`;可以使用模板字面量作为语法入口点，并更改模板字面量内部的语义，以允许可以在范围内评估的嵌入式脚本。
// Template Literals with embedded JSX
var box = jsx`
<Box>
{
shouldShowAnswer(user) ?
<Answer value={false}>no</Answer> :
<Box.Comment>
Text Content
</Box.Comment>
}
</Box>
`;但是，这将导致进一步的分歧。围绕模板字面量强加的假设构建的工具将无法正常工作。 这将破坏模板字面量的含义。 无论如何，都需要定义 JSX 在模板字面量中 ECMAScript 语法其余部分中的行为方式。
因此，最好将 JSX 作为一种全新的 PrimaryExpression (原始表达式) 引入
// JSX
var box =
<Box>
{
shouldShowAnswer(user) ?
<Answer value={false}>no</Answer> :
<Box.Comment>
Text Content
</Box.Comment>
}
</Box>;另一种选择是使用对象初始化器（类似于 JXON）。 不幸的是，平衡的大括号无法为大型树中元素的开始和结束位置提供良好的语法提示。 平衡的命名标签是 XML 风格表示法的关键语法特征。
JSX 语法类似于 E4X 规范 (ECMA-357)。 E4X 是一个具有深远语义含义的已弃用规范。 JSX 部分地与 E4X 语法的一个小子集重叠。 但是，JSX 与 E4X 规范无关。
版权所有 (c) 2014 - 至今，Meta Platforms, Inc. 保留所有权利。
本作品根据 Creative Commons Attribution 4.0 International License 获得许可。