原文: What is JSX?

在我们前面的文章中,我们看了 React 是什么,并在高层讨论了它是如何工作的。在本文中,我们将看看React生态系统的一部分:ES6和JSX。

JSX/ES5/ES6 什么鬼??!

在互联网上的任何粗略的搜索寻找React材料,毫无疑问,你已经遇到了条款JSX,ES5和ES6。这些不透明的首字母缩略词可能会很快混乱。

ES5(ES代表ECMAScript)基本上是“常规JavaScript”。第5次更新JavaScript,ES5在2009年完成。它已被所有主要浏览器支持多年。因此,如果你在最近写过或看过任何JavaScript,很可能是ES5。

ES6是一个新版本的JavaScript,添加了一些不错的语法和功能添加。它在2015年完成.ES6 几乎完全支持所有主要的浏览器。但这将是一段时间,直到较旧版本的Web浏览器逐步停止使用。例如,Internet Explorer 11不支持ES6,但是具有大约12%的浏览器市场份额。

为了获得ES6的好处今天,我们必须做一些事情,使它工作在尽可能多的浏览器,我们可以:

  1. 我们必须了解我们的代码,以便更广泛的浏览器了解我们的JavaScript。这意味着将ES6 JavaScript转换为ES5 JavaScript。
  2. 我们必须包括一个垫片或polyfill,提供在ES6中添加的浏览器可能具有或可能没有的附加功能。

我们将在本系列的稍后部分看到我们如何做到这一点。

我们将在本系列中编写的大多数代码都可以轻松地转换为ES5。在我们使用ES6的情况下,我们将首先介绍功能,然后通过它。

我们将看到,所有的React组件都有一个render函数,它指定了React组件的HTML输出。JavaScript eXtension,或更常见的JSX,是一个React扩展,允许我们编写看起来像 HTML的JavaScript 。

尽管在以前的范例中,将JavaScript和标记包含在同一个地方被认为是一种不好的习惯,但是结果是将视图与功能相结合使得对视图的推理变得非常简单。

看看这是什么意思,想象一下,我们有一个React组件来呈现一个h1HTML标签。JSX允许我们以非常类似于HTML的方式声明这个元素:

class HelloWorld extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

HelloWorld组件中的render()函数看起来像它的返回HTML,但其实这是JSX。JSX 在运行时被翻译成常规JavaScript。那个组件,翻译后,看起来像这样:

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

虽然JSX看起来像HTML,但它实际上只是一种更React.createElement()灵敏的方式来编写声明。当组件渲染时,它输出一个React元素树或该组件输出的HTML元素的虚拟表示。React然后将基于此React元素表示来确定对实际DOM所做的更改。在HelloWorld组件的情况下,React写入DOM的HTML将如下所示:

<h1 class='large'>Hello World</h1>

class extends我们在第一个作出反应组件使用的语法是ES6语法。它允许我们使用熟悉的面向对象样式编写对象。 在ES6中,class语法可能翻译为:

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

因为JSX是JavaScript,我们不能使用JavaScript保留字。这包括class和像for

React提供了我们的属性className。我们使用它HelloWorld来设置large我们的h1标签上的类。还有一些其他属性,如forReact转换htmlFor为的标签上的属性for也是保留字。当我们开始使用它们时,我们将看看这些。

如果我们想要编写纯JavaScript而不是依赖于JSX编译器,我们可以只写该React.createElement()函数,而不必担心抽象层。但我们喜欢JSX。它特别是更复杂的组件可读性。考虑下面的JSX:

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <h1>Welcome back Ari</h1>
</div>

传送到浏览器的JavaScript看起来像这样:

React.createElement("div", null, 
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);

同样,虽然你可以跳过JSX并直接编写后者,但JSX语法非常适合表示嵌套的HTML元素。

现在我们了解JSX,我们可以开始编写我们的第一个React组件。明天加入我们,当我们跳进我们的第一个React应用程序。