React（二）—— JSX

前言

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

在上一篇文章中，咱们研究了 React 是什么，并在高层讨论它是如何工做的。在本文中，咱们将讨论 React 生态系统的一部分：ES6 和 JSX。

JSX/ES5/ES6 WTF??!

在网上对 React 的搜索中，你必定已经遇到了 JSX, ES5 和 ES6这些术语。这些不透明的缩写很快就会让人混淆。

ES5（ES 表明 ECMAScript）基本上是“常规 JavaScript”。JavaScript 的第五次更新，ES5 于2009年完成。多年来，它一直受到全部主流浏览器的支持。所以，若是你最近编写或看过JavaScript，那么极可能是ES5。

ES6 是 JavaScript 的一个新版本，添加了一些很好的语法和功能。2015年定稿。ES6 几乎彻底获得全部主流浏览器的支持。可是，在旧版本浏览器逐步中止使用还须要一段时间。例如，IE 11 就不支持 ES6, 但拥有约12%的浏览器市场份额。

为了得到 ES6 的好处，咱们必须作一些事情才能让它在尽量多的浏览器中运行：

1. 咱们必须转换代码，以便更普遍的浏览器可以理解咱们的 JavaScript。这也意味着将 ES6 转换为 ES5。
2. 咱们必须包括一个垫片或polyfill，它提供在ES6中添加的浏览器可能有或没有的附加功能。

咱们将在稍后的系列文章中看到如何实现这一点。

咱们在本系列写的大多数代码均可以轻松转换成 ES5。在咱们使用 ES6 的状况下，咱们将首先介绍该功能，而后逐步介绍它。

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

尽管在以前的范例中，将 JavaScript 和标记包含在同一个地方被视为一种坏习惯。但事实证实，将视图和功能相结合能够直接推理视图。

为了看看这意味着什么，假设咱们有一个 React 组件，它呈现一个 h1 HTML 标记。JSX 容许咱们以一种很是相似 HTML 的方式声明这个元素：

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

Hello World

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 中，类语法将转换为：

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

由于 JSX 是 JavaScript，因此咱们不能使用 JavaScript保留字。这包括 class 和 for等词 。

React 为咱们提供了属性 className。咱们在 HelloWorld 中使用它在 h1 标签上设置 large 类。还有一些其余属性，例如标签的 for 属性，React 将它转换为 htmlFor。 当咱们使用它们时会看到这些。

若是咱们想编写纯 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 应用程序时，加入咱们。

参考

这是国外关于 React 的一系列文章，为了学习将其翻译成中文。翻译如有不正确的地方请指正。

原文连接： 30-days-of-react/day-2