JSX

JSX is XML-LIKE SYNTAX EXTENSION TO ECMASCRIPT.

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);

Rationale

此规范的目的是定义一种简洁而熟悉的语法，用于定义具有属性的树结构。一个通用的但定义良好的语法使一个独立的解析器和语法highlighters能够符合一个单一的规范。

在现有语言中嵌入新的语法是一种冒险。其他语法实现者或现有语言可能引入另一个不兼容的语法扩展。

通过一个独立的规范，我们使其他语法扩展的实现者更容易在设计自己的语法时考虑JSX。这有望允许各种新的语法扩展共存。

我们的意图是在保持语法简洁和熟悉的同时，声明最小的语法空间。这样我们就可以为其他的扩展敞开大门了。

此规范不尝试遵守任何XML或HTML规范。JSX是作为ECMAScript特性设计的，与XML的相似之处只是为了熟悉。

Syntax

JSX扩展了 ECMAScript第六版(ECMA-262) 语法中的主表达式:

解析器实现

acorn-jsx:一种橡子的叉。

esprima-fb: esprima的分支。

jsx-reader:甜。js宏。

Transpilers

这些是一组传输器，它们都遵循JSX语法，但在输出上使用不同的语义:

  • React JSX:使用JSX创建反应堆元素。

  • JSX-transform:与React解耦的JSX可配置实现。

  • Babel :一种ES2015，现在是使用JSX支持的现在的transiler。

注意: 传输者可以选择使用符合JSX语法的子集。

为什么不文本模板（Template Literals）吗?

ECMAScript第六版(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>
`;

然而，这将导致进一步的分歧。构建在模板文本强加的假设周围的工具不会起作用。它会破坏模板文字的含义。无论如何，有必要在模板文本中的其余ECMAScript语法中定义JSX的行为。

因此，最好将JSX引入为一种全新的PrimaryExpression类型:

// JSX
var box =
  <Box>
    {
      shouldShowAnswer(user) ?
      <Answer value={false}>no</Answer> :
      <Box.Comment>
         Text Content
      </Box.Comment>
    }
  </Box>;

为什么不JXON呢?

另一种选择是使用对象初始化器(类似于JXON)。不幸的是，平衡的大括号并不能为元素在大树中的开始和结束提供很好的语法提示。平衡命名标记是xml样式表示法的一个关键语法特性。

现有技术

JSX语法类似于E4X规范(ECMA-357)。E4X是一个不赞成的规范，具有深入的语义含义。JSX与E4X语法的一个小子集部分重叠。但是，JSX与E4X规范没有关系。