【全栈React】第2天: 什么是 JSX?

本文转载自：众成翻译
译者：iOSDevLog
连接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

如今咱们知道React是什么，让咱们来看看这个系列的其他部分将会出现的几个术语和概念。

在咱们前面的文章中，咱们看了一下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. We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
3. 咱们必须包括一个垫片或polyfill，提供在ES6中添加的浏览器可能具备或可能没有的附加功能。

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

咱们将在本系列中编写的大多数代码均可以轻松地转换为ES5。在咱们使用ES6的状况下，咱们将首先介绍功能，而后经过它。

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

尽管在之前的范例中，将JavaScript和标记包含在同一个地方被认为是一种很差的习惯，可是结果是将视图与功能相结合使得对视图的推理变得很是简单。

看看这是什么意思，想象一下，咱们有一个React组件来呈现一个h1 HTML标签。JSX容许咱们以很是相似于HTML的方式声明这个元素：

class Header 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来设置咱们的h1标签上的large 类。还有一些其余属性，如标签上的属性for为转换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应用程序。