React（二）—— JSX

小灰灰 2024-04-17 13:52 79阅读 0赞

## 前言 ##

#### 现在我们知道了 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][30-days-of-react_day-2]

转载于:https://juejin.im/post/5d1a38bfe51d457755550937

[30-days-of-react_day-2]: https://link.juejin.im?target=https%3A%2F%2Fwww.fullstackreact.com%2F30-days-of-react%2Fday-2